feat: finish installed plugin page & install from github

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;
+    }
+}