diff --git a/src/renderer/src/components/ContentSearch.tsx b/src/renderer/src/components/ContentSearch.tsx index 6842312137..499323d39a 100644 --- a/src/renderer/src/components/ContentSearch.tsx +++ b/src/renderer/src/components/ContentSearch.tsx @@ -1,3 +1,5 @@ +import { useSettings } from '@renderer/hooks/useSettings' +import { useShowTopics } from '@renderer/hooks/useStore' import { ToolbarButton } from '@renderer/pages/home/Inputbar/Inputbar' import NarrowLayout from '@renderer/pages/home/Messages/NarrowLayout' import { Tooltip } from 'antd' @@ -126,6 +128,8 @@ const findRangesInTarget = ( // eslint-disable-next-line @eslint-react/no-forward-ref export const ContentSearch = React.forwardRef( ({ searchTarget, filter, includeUser = false, onIncludeUserChange }, ref) => { + const { topicPosition } = useSettings() + const { showTopics } = useShowTopics() const target: HTMLElement | null = (() => { if (searchTarget instanceof HTMLElement) { return searchTarget @@ -333,10 +337,12 @@ export const ContentSearch = React.forwardRef( searchInputFocus() } + const isRightTopicsVisible = topicPosition === 'right' && showTopics + return ( - + ` border: 1px solid var(--color-primary); border-radius: 10px; transition: all 0.2s ease; position: fixed; - top: 15px; - left: 20px; - right: 20px; + top: 30px; + left: 50%; + transform: translateX(-50%); + width: ${(props) => + props.$isRightTopicsVisible + ? 'min(60%, calc(100vw - 400px))' + : 'min(60%, calc(100vw - 140px))'}; /* 容器2/3宽度,并考虑右侧避让 */ margin-bottom: 5px; padding: 5px 15px; display: flex; @@ -448,7 +458,7 @@ const ToolBar = styled.div` display: flex; flex-direction: row; align-items: center; - gap: tpx; + gap: 2px; ` const Separator = styled.div` @@ -463,8 +473,8 @@ const Separator = styled.div` const SearchResults = styled.div` display: flex; justify-content: center; - width: 80px; - margin: 0 2px; + width: 60px; + margin: 0 1px; flex: 0 0 auto; color: var(--color-text-1); font-size: 14px;