From ca183d2eb785a5db31820c0f05c99089999b4990 Mon Sep 17 00:00:00 2001 From: HYana Date: Sat, 26 Apr 2025 23:03:13 +0800 Subject: [PATCH] feat: finish installed plugin page & install from github --- web_ui/src/app/home/plugins/page.tsx | 3 +- .../PluginInstalledComponent.tsx | 54 +++++++++++++++++-- .../plugin-card/PluginCardComponent.tsx | 20 +++++-- .../plugin-card/pluginCard.module.css | 43 +++++++++++---- .../src/app/home/plugins/plugins.module.css | 25 +++++++++ 5 files changed, 128 insertions(+), 17 deletions(-) create mode 100644 web_ui/src/app/home/plugins/plugins.module.css diff --git a/web_ui/src/app/home/plugins/page.tsx b/web_ui/src/app/home/plugins/page.tsx index 877f89e2..c7448c75 100644 --- a/web_ui/src/app/home/plugins/page.tsx +++ b/web_ui/src/app/home/plugins/page.tsx @@ -3,6 +3,7 @@ import { Radio } from 'antd'; import {useState} from "react"; import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent"; import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent"; +import styles from './plugins.module.css' export default function PluginConfigPage() { enum PageType { @@ -31,7 +32,7 @@ export default function PluginConfigPage() { }} /> -
+
{ nowPageType === PageType.INSTALLED && } diff --git a/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx index 39e03b86..aaa5d0e9 100644 --- a/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx +++ b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx @@ -4,9 +4,15 @@ import CreateCardComponent from "@/app/infra/basic-component/create-card-compone import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO"; import {useEffect, useState} from "react"; import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent"; +import styles from "@/app/home/plugins/plugins.module.css"; +import {Modal, Input} from "antd"; +import {GithubOutlined} from "@ant-design/icons"; export default function PluginInstalledComponent () { const [pluginList, setPluginList] = useState([]) + const [modalOpen, setModalOpen] = useState(false) + const [githubURL, setGithubURL] = useState("") + useEffect(() => { initData() @@ -51,8 +57,48 @@ export default function PluginInstalledComponent () { ] } + function handleModalConfirm() { + installPlugin(githubURL) + setModalOpen(false) + } + + function installPlugin(url: string) { + // TODO 接安装Plugin的接口 + console.log("installPlugin: ", url) + } return ( -
+
+ + + 从 GitHub 安装插件 +
+ } + centered + open={modalOpen} + onOk={() => handleModalConfirm()} + onCancel={() => setModalOpen(false)} + width={500} + destroyOnClose={true} + > +
+
+ 目前仅支持从 GitHub 安装 +
+ setGithubURL(e.target.value)} + /> +
+ { pluginList.map((vo, index) => { return
@@ -62,9 +108,11 @@ export default function PluginInstalledComponent () { } {}} + onClick={() => { + setModalOpen(true) + }} />
) diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx index 162dc271..be137ded 100644 --- a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx +++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx @@ -1,5 +1,7 @@ import styles from "./pluginCard.module.css" import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO"; +import {GithubOutlined, LinkOutlined, ToolOutlined} from '@ant-design/icons'; +import {Tag} from 'antd' export default function PluginCardComponent({ cardVO @@ -14,7 +16,11 @@ export default function PluginCardComponent({
{cardVO.author}
{/* right icon & version */}
- + + v{cardVO.version}
{/* content */} @@ -24,8 +30,16 @@ export default function PluginCardComponent({
{/* footer */}
-
- +
+
+ + 1 +
+
diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css index 6f966543..44ed2665 100644 --- a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css +++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css @@ -1,41 +1,45 @@ .cardContainer { width: 360px; - height: 129px; + 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: flex-start; + align-items: center; justify-content: space-evenly; } .cardHeader { - width: 100%; + width: 90%; height: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; - background-color: #79c1f4; .iconVersionContainer { - width: 100px; + width: 90px; height: 100%; - background-color: #063a5a; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } } .cardContent { - width: 100%; + width: 90%; + height: 70px; - background-color: #e38787; } .cardFooter { - width: 100%; + width: 90%; height: 30px; - background-color: #f8ff6d; } @@ -47,3 +51,22 @@ 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; + align-self: center; + justify-content: space-between; + } +} diff --git a/web_ui/src/app/home/plugins/plugins.module.css b/web_ui/src/app/home/plugins/plugins.module.css new file mode 100644 index 00000000..438ce546 --- /dev/null +++ b/web_ui/src/app/home/plugins/plugins.module.css @@ -0,0 +1,25 @@ +.pluginListContainer { + align-self: flex-start; + justify-self: flex-start; + width: calc(100% - 60px); + margin: auto; + display: grid; + grid-template-rows: repeat(auto-fill, minmax(160px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 15px; + justify-items: center; + align-items: center; +} + +.modalTitle { + display: flex; + flex-direction: row; + align-items: center; +} + +.modalBody { + height: 80px; + display: flex; + flex-direction: column; + justify-content: space-around; +} \ No newline at end of file