修复插件管理卡片样式

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

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;

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

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