From 7414b288dc72b8fc137be68a7777acb5a56a67af Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Tue, 6 May 2025 23:09:44 +0800
Subject: [PATCH] perf: bot card css

---
 web/src/app/home/bots/botConfig.module.css    |   2 +-
 .../home/bots/components/bot-card/BotCard.tsx |  42 ++++---
 .../bots/components/bot-card/BotCardVO.ts     |  20 ++--
 .../bot-card/CreateBotCardComponent.tsx       |   0
 .../components/bot-card/botCard.module.css    | 109 ++++++++++--------
 web/src/app/home/bots/page.tsx                |  19 +--
 .../home-sidebar/HomeSidebar.module.css       |   1 +
 .../component/llm-card/LLMCard.module.css     |   1 +
 8 files changed, 112 insertions(+), 82 deletions(-)
 delete mode 100644 web/src/app/home/bots/components/bot-card/CreateBotCardComponent.tsx

diff --git a/web/src/app/home/bots/botConfig.module.css b/web/src/app/home/bots/botConfig.module.css
index 80fa5f2c..2dadb80a 100644
--- a/web/src/app/home/bots/botConfig.module.css
+++ b/web/src/app/home/bots/botConfig.module.css
@@ -17,7 +17,7 @@
     display: grid;
     grid-template-rows: repeat(auto-fill, minmax(220px, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-    gap: 15px;
+    gap: 2rem;
     justify-items: center;
     align-items: center;
 }
\ No newline at end of file
diff --git a/web/src/app/home/bots/components/bot-card/BotCard.tsx b/web/src/app/home/bots/components/bot-card/BotCard.tsx
index f57a2761..6a2382f4 100644
--- a/web/src/app/home/bots/components/bot-card/BotCard.tsx
+++ b/web/src/app/home/bots/components/bot-card/BotCard.tsx
@@ -4,30 +4,38 @@ import styles from './botCard.module.css';
 export default function BotCard({ botCardVO }: { botCardVO: BotCardVO }) {
   return (
     <div className={`${styles.cardContainer}`}>
-      {/*  icon和基本信息  */}
+
       <div className={`${styles.iconBasicInfoContainer}`}>
-        {/*  icon  */}
-        <div className={`${styles.icon}`}>ICO</div>
-        {/*  bot基本信息  */}
+        <img className={`${styles.iconImage}`} src={botCardVO.iconURL} alt="icon" />
+
         <div className={`${styles.basicInfoContainer}`}>
-          <div className={`${styles.basicInfoText}  ${styles.bigText}`}>
-            {botCardVO.name}
+
+          <div className={`${styles.basicInfoNameContainer}`}>
+            <div className={`${styles.basicInfoName}`}>
+              {botCardVO.name}
+            </div>
+            <div className={`${styles.basicInfoDescription}`}>
+              {botCardVO.description}
+            </div>
           </div>
-          <div className={`${styles.basicInfoText}`}>
-            平台：{botCardVO.adapter}
+
+          <div className={`${styles.basicInfoAdapterContainer}`}>
+            <svg className={`${styles.basicInfoAdapterIcon}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 8.99374C2 5.68349 4.67654 3 8.00066 3H15.9993C19.3134 3 22 5.69478 22 8.99374V21H8.00066C4.68659 21 2 18.3052 2 15.0063V8.99374ZM20 19V8.99374C20 6.79539 18.2049 5 15.9993 5H8.00066C5.78458 5 4 6.78458 4 8.99374V15.0063C4 17.2046 5.79512 19 8.00066 19H20ZM14 11H16V13H14V11ZM8 11H10V13H8V11Z"></path></svg>
+            <span className={`${styles.basicInfoAdapterLabel}`}>
+              {botCardVO.adapterLabel}
+            </span>
           </div>
-          <div className={`${styles.basicInfoText}`}>
-            绑定流水线：{botCardVO.pipelineName}
+
+          <div className={`${styles.basicInfoPipelineContainer}`}>
+            <svg className={`${styles.basicInfoPipelineIcon}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 21.5C4.067 21.5 2.5 19.933 2.5 18C2.5 16.067 4.067 14.5 6 14.5C7.5852 14.5 8.92427 15.5539 9.35481 16.9992L15 16.9994V15L17 14.9994V9.24339L14.757 6.99938H9V9.00003H3V3.00003H9V4.99939H14.757L18 1.75739L22.2426 6.00003L19 9.24139V14.9994L21 15V21H15V18.9994L9.35499 19.0003C8.92464 20.4459 7.58543 21.5 6 21.5ZM6 16.5C5.17157 16.5 4.5 17.1716 4.5 18C4.5 18.8285 5.17157 19.5 6 19.5C6.82843 19.5 7.5 18.8285 7.5 18C7.5 17.1716 6.82843 16.5 6 16.5ZM19 17H17V19H19V17ZM18 4.58581L16.5858 6.00003L18 7.41424L19.4142 6.00003L18 4.58581ZM7 5.00003H5V7.00003H7V5.00003Z"></path></svg>
+            <span className={`${styles.basicInfoPipelineLabel}`}>
+              {botCardVO.usePipelineName}
+            </span>
           </div>
+
         </div>
       </div>
-      {/*  描述和创建时间  */}
-      <div className={`${styles.urlAndUpdateText}`}>
-        描述：{botCardVO.description}
-      </div>
-      {/* <div className={`${styles.urlAndUpdateText}`}>
-                更新时间：{botCardVO.updateTime}
-            </div> */}
+
     </div>
   );
 }
diff --git a/web/src/app/home/bots/components/bot-card/BotCardVO.ts b/web/src/app/home/bots/components/bot-card/BotCardVO.ts
index a015a6c7..c0f7c19e 100644
--- a/web/src/app/home/bots/components/bot-card/BotCardVO.ts
+++ b/web/src/app/home/bots/components/bot-card/BotCardVO.ts
@@ -1,26 +1,26 @@
 export interface IBotCardVO {
   id: string;
+  iconURL: string;
   name: string;
-  adapter: string;
   description: string;
-  updateTime: string;
-  pipelineName: string;
+  adapterLabel: string;
+  usePipelineName: string;
 }
 
 export class BotCardVO implements IBotCardVO {
   id: string;
-  adapter: string;
-  description: string;
+  iconURL: string;
   name: string;
-  updateTime: string;
-  pipelineName: string;
+  description: string;
+  adapterLabel: string;
+  usePipelineName: string;
 
   constructor(props: IBotCardVO) {
     this.id = props.id;
+    this.iconURL = props.iconURL;
     this.name = props.name;
-    this.adapter = props.adapter;
     this.description = props.description;
-    this.updateTime = props.updateTime;
-    this.pipelineName = props.pipelineName;
+    this.adapterLabel = props.adapterLabel;
+    this.usePipelineName = props.usePipelineName;
   }
 }
diff --git a/web/src/app/home/bots/components/bot-card/CreateBotCardComponent.tsx b/web/src/app/home/bots/components/bot-card/CreateBotCardComponent.tsx
deleted file mode 100644
index e69de29b..00000000
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 ad7cc5d1..7b53fa81 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,67 +1,86 @@
-.iconBasicInfoContainer {
-    width: 300px;
-    height: 100px;
-    margin-left: 20px;
-    display: flex;
-    flex-direction: row;
-}
-
 .cardContainer {
-    width: 360px;
-    height: 200px;
-    background-color: #FFF;
-    border-radius: 9px;
-    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-evenly;
+    width: 24rem;
+    height: 10rem;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+    padding: 1.2rem;
+    cursor: pointer;
 }
 
 .iconBasicInfoContainer {
-    width: 300px;
-    height: 100px;
-    margin-left: 20px;
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: row;
+    gap: 0.8rem;
+    user-select: none;
+    /* background-color: aqua; */
 }
 
-.icon {
-    width: 90px;
-    height: 90px;
-    border-radius: 5px;
-    font-size: 40px;
-    line-height: 90px;
-    text-align: center;
-    color: #ffffff;
-    background: rgba(96, 149, 209, 0.31);
-    border: 1px solid rgba(96, 149, 209, 0.31);
+.iconImage {
+    width: 4rem;
+    height: 4rem;
+    margin: 0.2rem;
+    /* border-radius: 50%; */
 }
 
 .basicInfoContainer {
-    width: 200px;
-    height: 90px;
-    padding-left: 20px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
+    gap: 0.6rem;
 }
 
-.basicInfoText {
-
+.basicInfoNameContainer {
+    display: flex;
+    flex-direction: column;
 }
 
-.bigText {
-    font-size: 20px;
+.basicInfoName {
+    font-size: 1.4rem;
+    font-weight: 500;
 }
 
-.urlAndUpdateText {
-    margin-left: 20px;
+.basicInfoDescription {
+    font-size: 1.2rem;
+    font-weight: 300;
+    color: #b1b1b1;
 }
 
-.createCardContainer {
-    font-size: 90px;
-    background: #6062E7;
-    color: white;
+.basicInfoAdapterContainer {
+    display: flex;
+    flex-direction: row;
+    gap: 0.4rem;
+}
+
+.basicInfoAdapterIcon {
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-top: 0.2rem;
+    color: #626262;
+}
+
+.basicInfoAdapterLabel {
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: #626262;
+}
+
+.basicInfoPipelineContainer {
+    display: flex;
+    flex-direction: row;
+    gap: 0.4rem;
+}
+
+.basicInfoPipelineIcon {
+    width: 1.2rem;
+    height: 1.2rem;
+    color: #626262;
+    margin-top: 0.2rem;
+}
+
+.basicInfoPipelineLabel {
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: #626262;
 }
\ No newline at end of file
diff --git a/web/src/app/home/bots/page.tsx b/web/src/app/home/bots/page.tsx
index b3e7e168..dec645ce 100644
--- a/web/src/app/home/bots/page.tsx
+++ b/web/src/app/home/bots/page.tsx
@@ -47,12 +47,12 @@ export default function BotConfigPage() {
       .then((resp) => {
         const botList: BotCardVO[] = resp.bots.map((bot: Bot) => {
           return new BotCardVO({
-            adapter: bot.adapter,
-            description: bot.description,
             id: bot.uuid || '',
+            iconURL: httpClient.getAdapterIconURL(bot.adapter),
             name: bot.name,
-            updateTime: bot.updated_at || '',
-            pipelineName: bot.use_pipeline_name || '',
+            description: bot.description,
+            adapterLabel: bot.adapter,
+            usePipelineName: bot.use_pipeline_name || '',
           });
         });
         if (botList.length === 0) {
@@ -138,6 +138,12 @@ export default function BotConfigPage() {
       {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
       {pageShowRule === BotConfigPageShowRule.HAVE_BOT && (
         <div className={`${styles.botListContainer}`}>
+
+          <CreateCardComponent
+            height={'10rem'}
+            plusSize={'4rem'}
+            onClick={handleCreateBotClick}
+          />
           {botList.map((cardVO) => {
             return (
               <div
@@ -150,11 +156,6 @@ export default function BotConfigPage() {
               </div>
             );
           })}
-          <CreateCardComponent
-            height={'200px'}
-            plusSize={'90px'}
-            onClick={handleCreateBotClick}
-          />
         </div>
       )}
     </div>
diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.module.css b/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
index 510e4e4e..4f582eb2 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
@@ -6,6 +6,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    user-select: none;
 }
 
 .langbotIconContainer {
diff --git a/web/src/app/home/models/component/llm-card/LLMCard.module.css b/web/src/app/home/models/component/llm-card/LLMCard.module.css
index eefbe8d4..30989ead 100644
--- a/web/src/app/home/models/component/llm-card/LLMCard.module.css
+++ b/web/src/app/home/models/component/llm-card/LLMCard.module.css
@@ -50,6 +50,7 @@
 .providerIcon {
     width: 1.2rem;
     height: 1.2rem;
+    margin-top: 0.2rem;
     color: #626262;
 }