From f1beb108930f3f93aaf64bd0e680efd9e816a209 Mon Sep 17 00:00:00 2001
From: chris <1637083533@qq.com>
Date: Tue, 29 Apr 2025 16:25:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8F=92=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugin-card/PluginCardComponent.tsx       | 27 +++---
 .../plugin-card/pluginCard.module.css         | 21 +++++
 .../PluginMarketCardComponent.tsx             | 91 +++++++++----------
 .../pluginMarketCard.module.css               |  1 +
 4 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
index 53b3ecf9..8999534f 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -46,20 +46,23 @@ export default function PluginCardComponent({
       </div>
       {/*  footer  */}
       <div className={`${styles.cardFooter}`}>
-        <div className={`${styles.linkSettingContainer}`}>
-          <div className={`${styles.link}`}>
-            <LinkOutlined style={{ fontSize: "22px" }} />
-            <span>1</span>
+        <div className={`${styles.footerContainer}`}>
+          <div className={`${styles.linkAndToolContainer}`}>
+            <div className={`${styles.link}`}>
+              <LinkOutlined style={{ fontSize: "22px" }} />
+              <span>1</span>
+            </div>
+            <ToolOutlined style={{ fontSize: "22px" }} />
+          </div>
+          <div className={`${styles.switchContainer}`}>
+            <Switch
+              value={initialized}
+              onClick={handleEnable}
+              disabled={!switchEnable}
+            />
           </div>
-          <ToolOutlined style={{ fontSize: "22px" }} />
         </div>
-
-        <Switch
-          value={initialized}
-          onClick={handleEnable}
-          disabled={!switchEnable}
-        />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
index 3ec44fd4..1d09d462 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
+++ b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
@@ -41,8 +41,29 @@
 .cardFooter {
     width: 90%;
     height: 30px;
+    position: relative;
 }
 
+.footerContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.linkAndToolContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
+.switchContainer {
+    display: flex;
+    justify-content: flex-end;
+}
 
 .fontGray {
     color: #6C6C6C;
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
index 5d96c57f..dcc1dfd0 100644
--- a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
+++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
@@ -1,56 +1,49 @@
-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
+  cardVO: PluginMarketCardVO;
 }) {
+  function handleInstallClick(pluginId: string) {
+    console.log("Install plugin: ", pluginId);
+  }
 
-
-    function handleInstallClick (pluginId: string) {
-        console.log("Install plugin: ", pluginId)
-    }
-
-    return (
-        <div className={`${styles.cardContainer}`}>
-            {/*  header  */}
-            <div className={`${styles.cardHeader}`}>
-                {/* left author */}
-                <div className={`${styles.fontGray}`}>{cardVO.author}</div>
-                {/*  right icon */}
-                <GithubOutlined
-                    style={{fontSize: '26px'}}
-                    type="setting"
-                />
-            </div>
-            {/*  content  */}
-            <div className={`${styles.cardContent}`}>
-                <div className={`${styles.boldFont}`}>{cardVO.name}</div>
-                <div className={`${styles.fontGray}`}>{cardVO.description}</div>
-            </div>
-            {/*  footer  */}
-            <div className={`${styles.cardFooter}`}>
-                <div className={`${styles.linkSettingContainer}`}>
-                    <div className={`${styles.link}`}>
-                        <StarOutlined
-                            style={{fontSize: '22px'}}
-                        />
-                        <span>{cardVO.starCount}</span>
-                    </div>
-                </div>
-                <Button
-                    type="primary"
-                    size={"small"}
-                    onClick={() => {
-                        handleInstallClick(cardVO.pluginId)
-                    }}
-                >
-                    安装
-                </Button>
-            </div>
+  return (
+    <div className={`${styles.cardContainer}`}>
+      {/*  header  */}
+      <div className={`${styles.cardHeader}`}>
+        {/* left author */}
+        <div className={`${styles.fontGray}`}>{cardVO.author}</div>
+        {/*  right icon */}
+        <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
+      </div>
+      {/*  content  */}
+      <div className={`${styles.cardContent}`}>
+        <div className={`${styles.boldFont}`}>{cardVO.name}</div>
+        <div className={`${styles.fontGray}`}>{cardVO.description}</div>
+      </div>
+      {/*  footer  */}
+      <div className={`${styles.cardFooter}`}>
+        <div className={`${styles.linkSettingContainer}`}>
+          <div className={`${styles.link}`}>
+            <StarOutlined style={{ fontSize: "22px" }} />
+            <span style={{ paddingLeft: "5px" }}>{cardVO.starCount}</span>
+          </div>
         </div>
-    );
+        <Button
+          type="primary"
+          size={"small"}
+          onClick={() => {
+            handleInstallClick(cardVO.pluginId);
+          }}
+        >
+          安装
+        </Button>
+      </div>
+    </div>
+  );
 }
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
index 33297b09..97a5e224 100644
--- a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
+++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
@@ -71,5 +71,6 @@
         color: #6062E7;
         align-self: center;
         justify-content: space-between;
+        align-items: center;
     }
 }
\ No newline at end of file