Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-25 03:10:08 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: add ellipsis in knowledge base item (#1718)

Browse Source
This commit is contained in:
Wenwei Lin 2025-02-15 22:51:07 +08:00 committed by GitHub
parent 9a38c97552
commit dc3c2ccb9c
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/renderer/src/components/Ellipsis/index.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import styled from 'styled-components'
type Props = {
text: string | number
maxLine?: number
} & React.HTMLAttributes<HTMLDivElement>
const Ellipsis = (props: Props) => {
const { text, maxLine = 1, ...rest } = props
return (
<EllipsisContainer maxLine={maxLine} {...rest}>
{text}
</EllipsisContainer>
)
}
const EllipsisContainer = styled.div<{ maxLine: number }>`
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: ${({ maxLine }) => maxLine};
`
export default Ellipsis

21
src/renderer/src/pages/knowledge/KnowledgeContent.tsx
View File

@ -10,6 +10,7 @@ import {
SearchOutlined,
SettingOutlined
} from '@ant-design/icons'
import Ellipsis from '@renderer/components/Ellipsis'
import PromptPopup from '@renderer/components/Popups/PromptPopup'
import TextEditPopup from '@renderer/components/Popups/TextEditPopup'
import Scrollbar from '@renderer/components/Scrollbar'
@ -18,7 +19,7 @@ import FileManager from '@renderer/services/FileManager'
import { getProviderName } from '@renderer/services/ProviderService'
import { FileType, FileTypes, KnowledgeBase } from '@renderer/types'
import { documentExts, textExts } from '@shared/config/constant'
import { Alert, Button, Card, Divider, message, Tag, Typography, Upload } from 'antd'
import { Alert, Button, Card, Divider, message, Tag, Tooltip, Typography, Upload } from 'antd'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -229,7 +230,11 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
<ItemContent>
<ItemInfo>
<FileIcon />
<ClickableSpan onClick={() => window.api.file.openPath(file.path)}>{file.origin_name}</ClickableSpan>
<ClickableSpan onClick={() => window.api.file.openPath(file.path)}>
<Tooltip title={file.origin_name}>
<Ellipsis text={file.origin_name} />
</Tooltip>
</ClickableSpan>
</ItemInfo>
<FlexAlignCenter>
{item.uniqueId && <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />}
@ -258,7 +263,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
<ItemInfo>
<FolderOutlined />
<ClickableSpan onClick={() => window.api.file.openPath(item.content as string)}>
{item.content as string}
<Tooltip title={item.content as string}>
<Ellipsis text={item.content as string} />
</Tooltip>
</ClickableSpan>
</ItemInfo>
<FlexAlignCenter>
@ -288,7 +295,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
<ItemInfo>
<LinkOutlined />
<a href={item.content as string} target="_blank" rel="noopener noreferrer">
{item.content as string}
<Tooltip title={item.content as string}>
<Ellipsis text={item.content as string} />
</Tooltip>
</a>
</ItemInfo>
<FlexAlignCenter>
@ -318,7 +327,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
<ItemInfo>
<GlobalOutlined />
<a href={item.content as string} target="_blank" rel="noopener noreferrer">
{item.content as string}
<Tooltip title={item.content as string}>
<Ellipsis text={item.content as string} />
</Tooltip>
</a>
</ItemInfo>
<FlexAlignCenter>