feat: finish installed plugin page & install from github

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

@@ -3,6 +3,7 @@ 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'
 
 export default function PluginConfigPage() {
     enum PageType {
@@ -31,7 +32,7 @@ export default function PluginConfigPage() {
                     }}
                 />
             </div>
-            <div>
+            <div className={``}>
                 {
                     nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
                 }

web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx

@@ -4,9 +4,15 @@ import CreateCardComponent from "@/app/infra/basic-component/create-card-compone
 import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
 import {useEffect, useState} from "react";
 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";
 
 export default function PluginInstalledComponent () {
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([])
+    const [modalOpen, setModalOpen] = useState(false)
+    const [githubURL, setGithubURL] = useState("")
+
 
     useEffect(() => {
         initData()
@@ -51,8 +57,48 @@ export default function PluginInstalledComponent () {
         ]
     }
 
+    function handleModalConfirm() {
+        installPlugin(githubURL)
+        setModalOpen(false)
+    }
+
+    function installPlugin(url: string) {
+        // TODO 接安装Plugin的接口
+        console.log("installPlugin: ", url)
+    }
     return (
-        <div>
+        <div className={`${styles.pluginListContainer}`}>
+            <Modal
+                title={
+                    <div className={`${styles.modalTitle}`}>
+                        <GithubOutlined
+                            style={{
+                                fontSize: '30px',
+                                marginRight: '20px'
+                            }}
+                            type="setting"
+                        />
+                        <span>从 GitHub 安装插件</span>
+                    </div>
+                }
+                centered
+                open={modalOpen}
+                onOk={() => handleModalConfirm()}
+                onCancel={() => setModalOpen(false)}
+                width={500}
+                destroyOnClose={true}
+            >
+                <div className={`${styles.modalBody}`}>
+                    <div>
+                        目前仅支持从 GitHub 安装
+                    </div>
+                    <Input
+                        placeholder="请输入插件的Github链接"
+                        value={githubURL}
+                        onChange={(e) => setGithubURL(e.target.value)}
+                    />
+                </div>
+            </Modal>
             {
                 pluginList.map((vo, index) => {
                     return <div key={index}>
@@ -62,9 +108,11 @@ export default function PluginInstalledComponent () {
             }
             <CreateCardComponent
                 width={360}
-                height={120}
+                height={140}
                 plusSize={90}
-                onClick={() => {}}
+                onClick={() => {
+                    setModalOpen(true)
+                }}
             />
         </div>
     )

web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -1,5 +1,7 @@
 import styles from "./pluginCard.module.css"
 import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
+import {GithubOutlined, LinkOutlined, ToolOutlined} from '@ant-design/icons';
+import {Tag} from 'antd'
 
 export default function PluginCardComponent({
     cardVO
@@ -14,7 +16,11 @@ export default function PluginCardComponent({
                 <div className={`${styles.fontGray}`}>{cardVO.author}</div>
                 {/*  right icon & version  */}
                 <div className={`${styles.iconVersionContainer}`}>
-
+                    <GithubOutlined
+                        style={{fontSize: '30px'}}
+                        type="setting"
+                    />
+                    <Tag color="#108ee9">v{cardVO.version}</Tag>
                 </div>
             </div>
             {/*  content  */}
@@ -24,8 +30,16 @@ export default function PluginCardComponent({
             </div>
             {/*  footer  */}
             <div className={`${styles.cardFooter}`}>
-                <div className={`${styles.iconVersionContainer}`}>
-
+                <div className={`${styles.linkSettingContainer}`}>
+                    <div className={`${styles.link}`}>
+                        <LinkOutlined
+                            style={{fontSize: '22px'}}
+                        />
+                        <span>1</span>
+                    </div>
+                    <ToolOutlined
+                        style={{fontSize: '22px'}}
+                    />
                 </div>
             </div>
         </div>

web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css

@@ -1,41 +1,45 @@
 .cardContainer {
     width: 360px;
-    height: 129px;
+    height: 140px;
+    box-sizing: border-box;
     background-color: #FFF;
     border-radius: 9px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-evenly;
 }
 
 .cardHeader {
-    width: 100%;
+    width: 90%;
     height: 30px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    background-color: #79c1f4;
 
     .iconVersionContainer {
-        width: 100px;
+        width: 90px;
         height: 100%;
-        background-color: #063a5a;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
     }
 }
 
 .cardContent {
-    width: 100%;
+    width: 90%;
+
     height: 70px;
-    background-color: #e38787;
 }
 
 .cardFooter {
-    width: 100%;
+    width: 90%;
     height: 30px;
-    background-color: #f8ff6d;
 }
 
 
@@ -47,3 +51,22 @@
     font-size: 22px;
     font-weight: bold;
 }
+
+.linkSettingContainer {
+    width: 80px;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .link {
+        width: 32px;
+        cursor: pointer;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        align-self: center;
+        justify-content: space-between;
+    }
+}

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

@@ -0,0 +1,25 @@
+.pluginListContainer {
+    align-self: flex-start;
+    justify-self: flex-start;
+    width: calc(100% - 60px);
+    margin:  auto;
+    display: grid;
+    grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    gap: 15px;
+    justify-items: center;
+    align-items: center;
+}
+
+.modalTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.modalBody {
+    height: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}