diff --git a/src/renderer/src/assets/styles/ant.scss b/src/renderer/src/assets/styles/ant.scss index 1bfa70e858..dd46fa50b3 100644 --- a/src/renderer/src/assets/styles/ant.scss +++ b/src/renderer/src/assets/styles/ant.scss @@ -220,19 +220,22 @@ } } -.ant-popover-inner { - border: 0.5px solid var(--color-border); - border-radius: 12px; - .ant-popover-inner-content { - max-height: 70vh; - overflow-y: auto; - } -} -.ant-popover-arrow + .ant-popover-content { +.ant-popover { .ant-popover-inner { - border: none; + border: 0.5px solid var(--color-border); + border-radius: 12px; + .ant-popover-inner-content { + max-height: 70vh; + overflow-y: auto; + } + } + .ant-popover-arrow + .ant-popover-content { + .ant-popover-inner { + border: none; + } } } + .ant-modal { .ant-modal-confirm-body-has-title { padding: 16px 0 0 0; diff --git a/src/renderer/src/pages/home/Messages/CitationsList.tsx b/src/renderer/src/pages/home/Messages/CitationsList.tsx index 672587fff5..a33d03343d 100644 --- a/src/renderer/src/pages/home/Messages/CitationsList.tsx +++ b/src/renderer/src/pages/home/Messages/CitationsList.tsx @@ -1,10 +1,9 @@ import ContextMenu from '@renderer/components/ContextMenu' import Favicon from '@renderer/components/Icons/FallbackFavicon' -import { HStack } from '@renderer/components/Layout' import { fetchWebContent } from '@renderer/utils/fetch' import { cleanMarkdownContent } from '@renderer/utils/formats' import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' -import { Button, Drawer, message, Skeleton } from 'antd' +import { Button, message, Popover, Skeleton } from 'antd' import { Check, Copy, FileSearch } from 'lucide-react' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' @@ -48,16 +47,40 @@ const truncateText = (text: string, maxLength = 100) => { const CitationsList: React.FC = ({ citations }) => { const { t } = useTranslation() - const [open, setOpen] = useState(false) const previewItems = citations.slice(0, 3) const count = citations.length if (!count) return null + // Popover 内容 - 显示所有引用 + const popoverContent = ( + + {citations.map((citation) => ( +
+ {citation.type === 'websearch' ? ( + + ) : ( + + )} +
+ ))} +
+ ) + return ( - <> - setOpen(true)}> + {t('message.citations')}} + placement="right" + trigger="hover" + styles={{ + body: { + padding: '0 0 8px 0' + } + }}> + {previewItems.map((c, i) => ( @@ -71,27 +94,7 @@ const CitationsList: React.FC = ({ citations }) => { {t('message.citation', { count })} - - setOpen(false)} - open={open} - width={680} - styles={{ header: { border: 'none' }, body: { paddingTop: 0 } }} - destroyOnClose={false}> - {open && - citations.map((citation) => ( - - {citation.type === 'websearch' ? ( - - ) : ( - - )} - - ))} - - + ) } @@ -253,7 +256,6 @@ const WebSearchCard = styled.div` width: 100%; padding: 12px; border-radius: var(--list-item-border-radius); - background-color: var(--color-background); transition: all 0.3s ease; position: relative; ` @@ -282,4 +284,9 @@ const WebSearchCardContent = styled.div` } ` +const PopoverContent = styled.div` + max-width: 300px; + max-height: 50vh; +` + export default CitationsList