perf: card layout in each page

web/src/app/home/bots/botConfig.module.css

@@ -1,12 +1,10 @@
 .botListContainer {
-    align-self: flex-start;
+    width: 100%;
-    justify-self: flex-start;
+    padding-left: 0.8rem;
-    width: calc(100%);
+    padding-right: 0.8rem;
-    margin:  auto;
     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;
+    justify-items: stretch;
-    align-items: center;
+    align-items: start;
 }

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;

web/src/app/home/bots/page.tsx

@@ -106,7 +106,7 @@ export default function BotConfigPage() {
       {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
       <div className={`${styles.botListContainer}`}>
         <CreateCardComponent
-          width={'24rem'}
+          width={'100%'}
           height={'10rem'}
           plusSize={'90px'}
           onClick={handleCreateBotClick}

web/src/app/home/models/LLMConfig.module.css

@@ -1,15 +1,12 @@
-
 .modelListContainer {
-    align-self: flex-start;
+    width: 100%;
-    justify-self: flex-start;
+    padding-left: 0.8rem;
-    width: calc(100%);
+    padding-right: 0.8rem;
-    margin:  auto;
     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;
+    justify-items: stretch;
-    align-items: center;
+    align-items: start;
 }
 
 .emptyContainer {

web/src/app/home/models/component/llm-card/LLMCard.module.css

@@ -1,5 +1,5 @@
 .cardContainer {
-    width: 24rem;
+    width: 100%;
     height: 10rem;
     background-color: #fff;
     border-radius: 10px;

web/src/app/home/models/page.tsx

@@ -98,7 +98,7 @@ export default function LLMConfigPage() {
       </Dialog>
       <div className={`${styles.modelListContainer}`}>
         <CreateCardComponent
-          width={'24rem'}
+          width={'100%'}
           height={'10rem'}
           plusSize={'90px'}
           onClick={handleCreateModelClick}

web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css

@@ -1,5 +1,5 @@
 .cardContainer {
-    width: 24rem;
+    width: 100%;
     height: 10rem;
     background-color: #fff;
     border-radius: 10px;

web/src/app/home/pipelines/page.tsx

@@ -118,7 +118,7 @@ export default function PluginConfigPage() {
 
       <div className={styles.pipelineListContainer}>
         <CreateCardComponent
-          width={'24rem'}
+          width={'100%'}
           height={'10rem'}
           plusSize={'90px'}
           onClick={() => {

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;
+    width: 100%;
-    justify-self: flex-start;
+    padding-left: 0.8rem;
-    width: calc(100%);
+    padding-right: 0.8rem;
-    margin:  auto;
     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;
+    justify-items: stretch;
-    align-items: center;
+    align-items: start;
 }

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 (
     <div className={styles.pageContainer}>
       <Tabs defaultValue="installed" className="w-full">
-        <div className="flex flex-row justify-between items-center">
+        <div className="flex flex-row justify-between items-center px-[0.8rem]">
           <TabsList className="shadow-md py-5 bg-[#f0f0f0]">
             <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
               已安装

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

@@ -32,7 +32,7 @@ export default function PluginCardComponent({
   }
   return (
     <div
-      className="w-[26rem] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer"
+      className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer"
       onClick={onCardClick}
     >
       <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">

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();

web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx

@@ -125,7 +125,7 @@ export default function PluginMarketComponent({
 
   return (
     <div className={`${styles.marketComponentBody}`}>
-      <div className="flex items-center justify-start mb-2 mt-2">
+      <div className="flex items-center justify-start mb-2 mt-2 pl-[0.8rem] pr-[0.8rem]">
         <Input
           style={{
             width: '300px',

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

@@ -13,7 +13,7 @@ export default function PluginMarketCardComponent({
   }
 
   return (
-    <div className="w-[26rem] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem]">
+    <div className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem]">
       <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
         <svg
           className="w-16 h-16 text-[#2288ee]"

web/src/app/home/plugins/plugins.module.css

@@ -9,26 +9,13 @@
 }
 
 .pluginListContainer {
-    align-self: flex-start;
+    width: 100%;
-    justify-self: flex-start;
+    padding-left: 0.8rem;
-    margin: auto;
+    padding-right: 0.8rem;
+    padding-top: 2rem;
     display: grid;
-    grid-template-rows: repeat(auto-fill, minmax(12rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
-    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
+    gap: 2rem;
-    gap: 15px;
+    justify-items: stretch;
-    /* justify-items: center; */
+    align-items: start;
-    align-items: center;
-}
-
-.modalTitle {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.modalBody {
-    height: 80px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
 }