From 29f3cb9d5c655672f066f9a1bd897cbb98cbdd4b Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Fri, 9 May 2025 16:32:54 +0800 Subject: [PATCH] feat: marketplace cards --- web/src/app/home/plugins/page.tsx | 9 +- .../plugin-card/pluginCard.module.css | 2 +- .../plugin-market/PluginMarketComponent.tsx | 34 +++- .../PluginMarketCardComponent.tsx | 72 +++---- .../pluginMarketCard.module.css | 175 +++++++++++------- 5 files changed, 182 insertions(+), 110 deletions(-) diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx index 9cf94c1d..9713ed69 100644 --- a/web/src/app/home/plugins/page.tsx +++ b/web/src/app/home/plugins/page.tsx @@ -86,7 +86,12 @@ export default function PluginConfigPage() { - + { + setGithubURL(githubURL); + setModalOpen(true); + setPluginInstallStatus(PluginInstallStatus.WAIT_INPUT); + setInstallError(null); + }} /> @@ -96,7 +101,7 @@ export default function PluginConfigPage() { - 从GitHub安装插件 + 从 GitHub 安装插件 {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && ( 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 20c77582..b88d8a75 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 @@ -71,7 +71,7 @@ font-size: 1rem; color: #666; display: -webkit-box; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } diff --git a/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx index 897f02f9..8a5f4555 100644 --- a/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx +++ b/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx @@ -7,7 +7,11 @@ import PluginMarketCardComponent from '@/app/home/plugins/plugin-market/plugin-m import { Input, Pagination } from 'antd'; import { spaceClient } from '@/app/infra/http/HttpClient'; -export default function PluginMarketComponent() { +export default function PluginMarketComponent({ + askInstallPlugin, +}: { + askInstallPlugin: (githubURL: string) => void, +}) { const [marketPluginList, setMarketPluginList] = useState< PluginMarketCardVO[] >([]); @@ -43,19 +47,31 @@ export default function PluginMarketComponent() { .then((res) => { setMarketPluginList( res.plugins.map( - (marketPlugin) => - new PluginMarketCardVO({ - author: marketPlugin.author, + (marketPlugin) => { + let repository = marketPlugin.repository; + if (repository.startsWith('https://github.com/')) { + repository = repository.replace('https://github.com/', ''); + } + + if (repository.startsWith('github.com/')) { + repository = repository.replace('github.com/', ''); + } + + const author = repository.split('/')[0]; + const name = repository.split('/')[1]; + return new PluginMarketCardVO({ + author: author, description: marketPlugin.description, - githubURL: marketPlugin.repository, - name: marketPlugin.name, + githubURL: `https://github.com/${repository}`, + name: name, pluginId: String(marketPlugin.ID), starCount: marketPlugin.stars, version: 'version' in marketPlugin ? String(marketPlugin.version) : '1.0.0', // Default version if not provided - }), + }); + }, ), ); setTotalCount(res.total); @@ -94,7 +110,9 @@ export default function PluginMarketComponent() { ) : ( marketPluginList.map((vo, index) => (
- + { + askInstallPlugin(githubURL); + }} />
)) )} 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 f9a41933..444fc265 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,48 +1,58 @@ 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 { Button } from '@/components/ui/button'; export default function PluginMarketCardComponent({ cardVO, + installPlugin, }: { cardVO: PluginMarketCardVO; + installPlugin: (pluginURL: string) => void; }) { - function handleInstallClick(pluginId: string) { - console.log('Install plugin: ', pluginId); + function handleInstallClick(pluginURL: string) { + installPlugin(pluginURL); } return ( +
- {/* header */} -
- {/* left author */} -
{cardVO.author}
- {/* right icon */} - -
- {/* content */} -
-
{cardVO.name}
-
{cardVO.description}
-
- {/* footer */} -
-
-
- - {cardVO.starCount} +
+ + +
+ +
+ +
+
{cardVO.author} /
+
+
{cardVO.name}
+
+
+ +
{cardVO.description}
+ +
+ +
+ +
星标 {cardVO.starCount}
+
+ +
+ + +
+ +
+
- +
); 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 97a5e224..719c2e09 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 @@ -1,76 +1,115 @@ .cardContainer { - 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; + width: 26rem; + height: 10rem; + background-color: #fff; + border-radius: 10px; + box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2); + padding: 1.2rem; } -.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; +.contentContainer { + width: 100%; height: 100%; display: flex; flex-direction: row; - align-items: center; - justify-content: space-between; + align-items: flex-start; + justify-content: flex-start; + gap: 1.2rem; +} - .link { - width: 32px; - cursor: pointer; - text-align: center; - display: flex; - flex-direction: row; - color: #6062E7; - align-self: center; - justify-content: space-between; - align-items: center; - } +.pluginIcon { + width: 4rem; + height: 4rem; + color: #2288ee; +} + +.infoContainer { + width: 100%; + height: 100%; + /* background-color: aqua; */ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap: 0.6rem; +} + +.basicInfoContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + + +.nameContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.author { + font-size: 0.7rem; + color: #666; +} + +.nameAndVersionContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 0.4rem; +} + +.name { + font-size: 1.2rem; + color: #000; +} + +.description { + font-size: 0.8rem; + color: #666; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.componentContainer { + width: 100%; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 0.6rem; +} + +.componentEntryContainer { + display: flex; + height: 100%; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0.4rem; +} + +.componentIcon { + width: 1.2rem; + height: 1.2rem; + color: #ffcd27; +} + + +.componentText { + font-size: 1rem; + color: #ffcd27; + font-weight: 500; +} + +.githubIcon { + width: 1.4rem; + height: 1.4rem; + color: #000; + cursor: pointer; } \ No newline at end of file