修复插件管理卡片样式

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

@@ -46,14 +46,15 @@ export default function PluginCardComponent({
       </div>
       {/*  footer  */}
       <div className={`${styles.cardFooter}`}>
-        <div className={`${styles.linkSettingContainer}`}>
+        <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}
@@ -61,5 +62,7 @@ export default function PluginCardComponent({
             />
           </div>
         </div>
+      </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,17 +1,15 @@
-import styles from "./pluginMarketCard.module.css"
+import styles from "./pluginMarketCard.module.css";
-import {GithubOutlined, StarOutlined} from '@ant-design/icons';
+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: PluginMarketCardVO
+  cardVO: PluginMarketCardVO;
 }) {
-
-
   function handleInstallClick(pluginId: string) {
-        console.log("Install plugin: ", pluginId)
+    console.log("Install plugin: ", pluginId);
   }
 
   return (
@@ -21,10 +19,7 @@ export default function PluginMarketCardComponent({
         {/* left author */}
         <div className={`${styles.fontGray}`}>{cardVO.author}</div>
         {/*  right icon */}
-                <GithubOutlined
+        <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
-                    style={{fontSize: '26px'}}
-                    type="setting"
-                />
       </div>
       {/*  content  */}
       <div className={`${styles.cardContent}`}>
@@ -35,17 +30,15 @@ export default function PluginMarketCardComponent({
       <div className={`${styles.cardFooter}`}>
         <div className={`${styles.linkSettingContainer}`}>
           <div className={`${styles.link}`}>
-                        <StarOutlined
+            <StarOutlined style={{ fontSize: "22px" }} />
-                            style={{fontSize: '22px'}}
+            <span style={{ paddingLeft: "5px" }}>{cardVO.starCount}</span>
-                        />
-                        <span>{cardVO.starCount}</span>
           </div>
         </div>
         <Button
           type="primary"
           size={"small"}
           onClick={() => {
-                        handleInstallClick(cardVO.pluginId)
+            handleInstallClick(cardVO.pluginId);
           }}
         >
           安装

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