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 +} & HTMLAttributes const Ellipsis = (props: Props) => { - const { text, maxLine = 1, ...rest } = props + const { maxLine = 1, children, ...rest } = props return ( - - {text} + + {children} ) } -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 = ({ selectedBase }) => { window.api.file.openPath(file.path)}> - - - + + {file.origin_name} + @@ -295,9 +295,9 @@ const KnowledgeContent: FC = ({ selectedBase }) => { window.api.file.openPath(item.content as string)}> - - - + + {item.content as string} + @@ -353,11 +353,15 @@ const KnowledgeContent: FC = ({ selectedBase }) => { ] }} trigger={['contextMenu']}> - + - + + + {item.remark || (item.content as string)} + + - + @@ -386,11 +390,15 @@ const KnowledgeContent: FC = ({ selectedBase }) => { - + - + + + {item.content as string} + + - + {item.uniqueId &&