From 55087e54d07e922c6efd729799dc3b01f3fc085c Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Sat, 10 May 2025 09:25:39 +0800 Subject: [PATCH] perf: card layout in each page --- web/src/app/home/bots/botConfig.module.css | 12 +++---- .../components/bot-card/botCard.module.css | 2 +- web/src/app/home/bots/page.tsx | 2 +- web/src/app/home/models/LLMConfig.module.css | 13 +++----- .../component/llm-card/LLMCard.module.css | 2 +- web/src/app/home/models/page.tsx | 2 +- .../pipeline-card/pipelineCard.module.css | 2 +- web/src/app/home/pipelines/page.tsx | 2 +- .../home/pipelines/pipelineConfig.module.css | 17 +++------- web/src/app/home/plugins/page.tsx | 10 ++++-- .../plugin-card/PluginCardComponent.tsx | 2 +- .../plugin-form/PluginForm.tsx | 7 +++++ .../plugin-market/PluginMarketComponent.tsx | 2 +- .../PluginMarketCardComponent.tsx | 2 +- web/src/app/home/plugins/plugins.module.css | 31 ++++++------------- 15 files changed, 48 insertions(+), 60 deletions(-) diff --git a/web/src/app/home/bots/botConfig.module.css b/web/src/app/home/bots/botConfig.module.css index f3c3448d..f65512dd 100644 --- a/web/src/app/home/bots/botConfig.module.css +++ b/web/src/app/home/bots/botConfig.module.css @@ -1,12 +1,10 @@ .botListContainer { - align-self: flex-start; - justify-self: flex-start; - width: calc(100%); - margin: auto; + width: 100%; + padding-left: 0.8rem; + padding-right: 0.8rem; display: grid; - grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 2rem; - justify-items: center; - align-items: center; + justify-items: stretch; + align-items: start; } \ No newline at end of file diff --git a/web/src/app/home/bots/components/bot-card/botCard.module.css b/web/src/app/home/bots/components/bot-card/botCard.module.css index 4d08ca65..f8dc9305 100644 --- a/web/src/app/home/bots/components/bot-card/botCard.module.css +++ b/web/src/app/home/bots/components/bot-card/botCard.module.css @@ -1,5 +1,5 @@ .cardContainer { - width: 24rem; + width: 100%; height: 10rem; background-color: #fff; border-radius: 10px; diff --git a/web/src/app/home/bots/page.tsx b/web/src/app/home/bots/page.tsx index ba478e87..1b9409c4 100644 --- a/web/src/app/home/bots/page.tsx +++ b/web/src/app/home/bots/page.tsx @@ -106,7 +106,7 @@ export default function BotConfigPage() { {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
{ diff --git a/web/src/app/home/pipelines/pipelineConfig.module.css b/web/src/app/home/pipelines/pipelineConfig.module.css index 9ff11247..8330b40c 100644 --- a/web/src/app/home/pipelines/pipelineConfig.module.css +++ b/web/src/app/home/pipelines/pipelineConfig.module.css @@ -1,8 +1,3 @@ -.formItemSubTitle { - font-size: 30px; - font-weight: bold; -} - .configPageContainer { width: 100%; height: 100%; @@ -10,14 +5,12 @@ .pipelineListContainer { - align-self: flex-start; - justify-self: flex-start; - width: calc(100%); - margin: auto; + width: 100%; + padding-left: 0.8rem; + padding-right: 0.8rem; display: grid; - grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 2rem; - justify-items: center; - align-items: center; + justify-items: stretch; + align-items: start; } diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx index a207c3dd..c66f3a25 100644 --- a/web/src/app/home/plugins/page.tsx +++ b/web/src/app/home/plugins/page.tsx @@ -18,7 +18,7 @@ import { Input } from '@/components/ui/input'; import { GithubIcon } from 'lucide-react'; import { useState, useRef } from 'react'; import { httpClient } from '@/app/infra/http/HttpClient'; - +import { toast } from 'sonner'; enum PluginInstallStatus { WAIT_INPUT = 'wait_input', INSTALLING = 'installing', @@ -43,6 +43,8 @@ export default function PluginConfigPage() { .then((resp) => { const taskId = resp.task_id; + let alreadySuccess = false; + // 每秒拉取一次任务状态 const interval = setInterval(() => { httpClient.getAsyncTask(taskId).then((resp) => { @@ -54,6 +56,10 @@ export default function PluginConfigPage() { setPluginInstallStatus(PluginInstallStatus.ERROR); } else { // success + if (!alreadySuccess) { + toast.success('插件安装成功'); + alreadySuccess = true; + } setGithubURL(''); setModalOpen(false); pluginInstalledRef.current?.refreshPluginList(); @@ -72,7 +78,7 @@ export default function PluginConfigPage() { return (
-
+
已安装 diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx index ffe25976..eecba2f0 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx @@ -32,7 +32,7 @@ export default function PluginCardComponent({ } return (
diff --git a/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx b/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx index 823d14e3..060afa06 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx +++ b/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx @@ -79,6 +79,8 @@ export default function PluginForm({ .then((res) => { const taskId = res.task_id; + let alreadySuccess = false; + const interval = setInterval(() => { httpClient.getAsyncTask(taskId).then((res) => { if (res.runtime.done) { @@ -87,6 +89,11 @@ export default function PluginForm({ setPluginRemoveError(res.runtime.exception); setPluginRemoveStatus(PluginRemoveStatus.ERROR); } else { + // success + if (!alreadySuccess) { + toast.success('插件删除成功'); + alreadySuccess = true; + } setPluginRemoveStatus(PluginRemoveStatus.WAIT_INPUT); setShowDeleteConfirmModal(false); onFormSubmit(); diff --git a/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx index 1d1f131d..9ef951bf 100644 --- a/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx +++ b/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx @@ -125,7 +125,7 @@ export default function PluginMarketComponent({ return (
-
+
+