chore: rename web_ui dir to web

2026-08-10 13:10:57 +00:00 · 2025-04-28 21:41:03 +08:00
parent 5c74bb41c9
commit 2eaac168dc
81 changed files with 0 additions and 1 deletions
@@ -0,0 +1,56 @@
+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: PluginMarketCardVO
+}) {
+
+
+    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>
+        </div>
+    );
+}
@@ -0,0 +1,26 @@
+export interface IPluginMarketCardVO {
+    pluginId: string;
+    author: string,
+    name: string,
+    description: string,
+    starCount: number,
+    githubURL: string,
+}
+
+export class PluginMarketCardVO implements IPluginMarketCardVO {
+    pluginId: string;
+    description: string;
+    name: string;
+    author: string;
+    githubURL: string;
+    starCount: number;
+
+    constructor(prop: IPluginMarketCardVO) {
+        this.description = prop.description
+        this.name = prop.name
+        this.author = prop.author
+        this.githubURL = prop.githubURL
+        this.starCount = prop.starCount
+        this.pluginId = prop.pluginId
+    }
+}
@@ -0,0 +1,77 @@
+.cardContainer {
+    width: 360px;
+    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: center;
+    justify-content: space-evenly;
+}
+
+.cardHeader {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .iconVersionContainer {
+        width: 90px;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.cardContent {
+    width: 90%;
+
+    height: 70px;
+}
+
+.cardFooter {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.fontGray {
+    color: #6C6C6C;
+}
+
+.boldFont {
+    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;
+        color: #6062E7;
+        align-self: center;
+        justify-content: space-between;
+    }
+}