From b2abc36baa3027834a04da0134ef6c740fe15518 Mon Sep 17 00:00:00 2001
From: kunkeji <49889250+kunkeji@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:02:17 +0800
Subject: [PATCH] Optimize the knowledge base card UI  (#3756)

### What problem does this PR solve?

Set the title to 2 lines, display the excess part
Set the description to 3 lines, display the excess part

![image](https://github.com/user-attachments/assets/4b01cac5-b7a3-40cc-8965-42aeba9ea233)

![image](https://github.com/user-attachments/assets/aa4230eb-100f-4905-9cf0-75ce9813a332)


### Type of change

- [x] Other (please describe):
---
 .../pages/knowledge/knowledge-card/index.less | 29 +++++++++++++++++++
 .../pages/knowledge/knowledge-card/index.tsx  |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less
index bd5d81911..8f074bf45 100644
--- a/web/src/pages/knowledge/knowledge-card/index.less
+++ b/web/src/pages/knowledge/knowledge-card/index.less
@@ -23,6 +23,35 @@
   .footerTop {
     padding-bottom: 2px;
   }
+
+  .titleWrapper {
+    margin: 16px 0;
+    overflow: hidden;
+    
+    .title {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      word-break: break-all;
+    }
+    
+    .description{
+      margin-top: 4px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
 }
 
 .card {
diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx
index 7f6e13169..0fa41428c 100644
--- a/web/src/pages/knowledge/knowledge-card/index.tsx
+++ b/web/src/pages/knowledge/knowledge-card/index.tsx
@@ -53,7 +53,7 @@ const KnowledgeCard = ({ item }: IProps) => {
           </div>
           <div className={styles.titleWrapper}>
             <span className={styles.title}>{item.name}</span>
-            <p>{item.description}</p>
+            <p className={styles.description}>{item.description}</p>
           </div>
           <div className={styles.footer}>
             <div className={styles.footerTop}>