injectlib/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2025-11-25 11:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复插件管理卡片样式

Browse Source
This commit is contained in:
chris
2025-04-29 16:25:58 +08:00
parent 5c162009ee
commit f1beb10893
4 changed files with 79 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,20 +46,23 @@ export default function PluginCardComponent({
</div> </div>
{/* footer */} {/* footer */}
<div className={`${styles.cardFooter}`}> <div className={`${styles.cardFooter}`}>
<div className={`${styles.linkSettingContainer}`}> <div className={`${styles.footerContainer}`}>
<div className={`${styles.link}`}> <div className={`${styles.linkAndToolContainer}`}>
<LinkOutlined style={{ fontSize: "22px" }} /> <div className={`${styles.link}`}>
<span>1</span> <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> </div>
<ToolOutlined style={{ fontSize: "22px" }} />
</div> </div>
<Switch
value={initialized}
onClick={handleEnable}
disabled={!switchEnable}
/>
</div> </div>
</div> </div>
); );
} }

21
web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
View File

@@ -41,8 +41,29 @@
.cardFooter { .cardFooter {
width: 90%; width: 90%;
height: 30px; 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 { .fontGray {
color: #6C6C6C; color: #6C6C6C;

91
web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
View File

@@ -1,56 +1,49 @@
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 { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
import {Button} from "antd"; import { Button } from "antd";
export default function PluginMarketCardComponent({ export default function PluginMarketCardComponent({
cardVO cardVO
}: { }: {
cardVO: PluginMarketCardVO cardVO: PluginMarketCardVO;
}) { }) {
function handleInstallClick(pluginId: string) {
console.log("Install plugin: ", pluginId);
}
return (
function handleInstallClick (pluginId: string) { <div className={`${styles.cardContainer}`}>
console.log("Install plugin: ", pluginId) {/* header */}
} <div className={`${styles.cardHeader}`}>
{/* left author */}
return ( <div className={`${styles.fontGray}`}>{cardVO.author}</div>
<div className={`${styles.cardContainer}`}> {/* right icon */}
{/* header */} <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
<div className={`${styles.cardHeader}`}> </div>
{/* left author */} {/* content */}
<div className={`${styles.fontGray}`}>{cardVO.author}</div> <div className={`${styles.cardContent}`}>
{/* right icon */} <div className={`${styles.boldFont}`}>{cardVO.name}</div>
<GithubOutlined <div className={`${styles.fontGray}`}>{cardVO.description}</div>
style={{fontSize: '26px'}} </div>
type="setting" {/* footer */}
/> <div className={`${styles.cardFooter}`}>
</div> <div className={`${styles.linkSettingContainer}`}>
{/* content */} <div className={`${styles.link}`}>
<div className={`${styles.cardContent}`}> <StarOutlined style={{ fontSize: "22px" }} />
<div className={`${styles.boldFont}`}>{cardVO.name}</div> <span style={{ paddingLeft: "5px" }}>{cardVO.starCount}</span>
<div className={`${styles.fontGray}`}>{cardVO.description}</div> </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>
</div> </div>
); <Button
type="primary"
size={"small"}
onClick={() => {
handleInstallClick(cardVO.pluginId);
}}
>
安装
</Button>
</div>
</div>
);
} }

1
web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
View File

@@ -71,5 +71,6 @@
color: #6062E7; color: #6062E7;
align-self: center; align-self: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
} }