From ad39d8774d581974fccbcd4e2f835f987ca5c21d Mon Sep 17 00:00:00 2001
From: MyPrototypeWhat <43230886+MyPrototypeWhat@users.noreply.github.com>
Date: Sun, 2 Mar 2025 20:43:56 +0800
Subject: [PATCH] refactor: Improve Ellipsis component and usage (#2603)

* refactor: Improve Ellipsis component and usage

- Modify Ellipsis component to use children instead of text prop
- Add support for multi-line and single-line ellipsis with styled-components
- Update KnowledgeContent to use new Ellipsis component structure
- Enhance ClickableSpan styling for better text truncation

* fix: Improve text wrapping in Ellipsis component

Add overflow-wrap: break-word to ensure long words are properly truncated in multi-line ellipsis

* refactor: Improve link and tooltip rendering in KnowledgeContent

- Wrap links with ClickableSpan for better interaction and styling
- Adjust Tooltip and Ellipsis placement for improved readability
- Remove unnecessary inline styling for links in ItemInfo

---------

Co-authored-by: lizhixuan <zhixuan.li@banosuperapp.com>
---
 .../src/components/Ellipsis/index.tsx         | 29 ++++++++-----
 .../src/pages/knowledge/KnowledgeContent.tsx  | 41 ++++++++++---------
 2 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/renderer/src/components/Ellipsis/index.tsx b/src/renderer/src/components/Ellipsis/index.tsx
index 34f546ad..7905e386 100644
--- a/src/renderer/src/components/Ellipsis/index.tsx
+++ b/src/renderer/src/components/Ellipsis/index.tsx
@@ -1,26 +1,35 @@
-import React from 'react'
-import styled from 'styled-components'
+import type { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
 
 type Props = {
-  text: string | number
   maxLine?: number
-} & React.HTMLAttributes<HTMLDivElement>
+} & HTMLAttributes<HTMLDivElement>
 
 const Ellipsis = (props: Props) => {
-  const { text, maxLine = 1, ...rest } = props
+  const { maxLine = 1, children, ...rest } = props
   return (
-    <EllipsisContainer maxLine={maxLine} {...rest}>
-      {text}
+    <EllipsisContainer $maxLine={maxLine} {...rest}>
+      {children}
     </EllipsisContainer>
   )
 }
 
-const EllipsisContainer = styled.div<{ maxLine: number }>`
+const multiLineEllipsis = css<{ $maxLine: number }>`
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
+  -webkit-line-clamp: ${({ $maxLine }) => $maxLine};
+  overflow-wrap: break-word;
+`
+
+const singleLineEllipsis = css`
+  display: block;
+  white-space: nowrap;
+`
+
+const EllipsisContainer = styled.div<{ $maxLine: number }>`
   overflow: hidden;
-  -webkit-line-clamp: ${({ maxLine }) => maxLine};
+  text-overflow: ellipsis;
+  ${({ $maxLine }) => ($maxLine > 1 ? multiLineEllipsis : singleLineEllipsis)}
 `
 
 export default Ellipsis
diff --git a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
index 1329f631..d4bce82d 100644
--- a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
@@ -263,9 +263,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                 <ItemInfo>
                   <FileIcon />
                   <ClickableSpan onClick={() => window.api.file.openPath(file.path)}>
-                    <Tooltip title={file.origin_name}>
-                      <Ellipsis text={file.origin_name} />
-                    </Tooltip>
+                    <Ellipsis>
+                      <Tooltip title={file.origin_name}>{file.origin_name}</Tooltip>
+                    </Ellipsis>
                   </ClickableSpan>
                 </ItemInfo>
                 <FlexAlignCenter>
@@ -295,9 +295,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                 <ItemInfo>
                   <FolderOutlined />
                   <ClickableSpan onClick={() => window.api.file.openPath(item.content as string)}>
-                    <Tooltip title={item.content as string}>
-                      <Ellipsis text={item.content as string} />
-                    </Tooltip>
+                    <Ellipsis>
+                      <Tooltip title={item.content as string}>{item.content as string}</Tooltip>
+                    </Ellipsis>
                   </ClickableSpan>
                 </ItemInfo>
                 <FlexAlignCenter>
@@ -353,11 +353,15 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                       ]
                     }}
                     trigger={['contextMenu']}>
-                    <a href={item.content as string} target="_blank" rel="noopener noreferrer">
+                    <ClickableSpan>
                       <Tooltip title={item.content as string}>
-                        <Ellipsis text={item.remark || (item.content as string)} />
+                        <Ellipsis>
+                          <a href={item.content as string} target="_blank" rel="noopener noreferrer">
+                            {item.remark || (item.content as string)}
+                          </a>
+                        </Ellipsis>
                       </Tooltip>
-                    </a>
+                    </ClickableSpan>
                   </Dropdown>
                 </ItemInfo>
                 <FlexAlignCenter>
@@ -386,11 +390,15 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
               <ItemContent>
                 <ItemInfo>
                   <GlobalOutlined />
-                  <a href={item.content as string} target="_blank" rel="noopener noreferrer">
+                  <ClickableSpan>
                     <Tooltip title={item.content as string}>
-                      <Ellipsis text={item.content as string} />
+                      <Ellipsis>
+                        <a href={item.content as string} target="_blank" rel="noopener noreferrer">
+                          {item.content as string}
+                        </a>
+                      </Ellipsis>
                     </Tooltip>
-                  </a>
+                  </ClickableSpan>
                 </ItemInfo>
                 <FlexAlignCenter>
                   {item.uniqueId && <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />}
@@ -530,13 +538,6 @@ const ItemInfo = styled.div`
   align-items: center;
   gap: 8px;
   flex: 1;
-
-  a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 600px;
-  }
 `
 
 const IndexSection = styled.div`
@@ -570,6 +571,8 @@ const FlexAlignCenter = styled.div`
 
 const ClickableSpan = styled.span`
   cursor: pointer;
+  flex: 1;
+  width: 0;
 `
 
 const FileIcon = styled(FileTextOutlined)`