Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-04 03:40:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Revert "feat(contentsearch): optimize searchbar UI (#8556)"

Browse Source 
This reverts commit eb309563a9.
This commit is contained in:
kangfenmao 2025-07-29 18:08:00 +08:00
parent f1b52869a9
commit 385c6d6aab
1 changed files with 8 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/renderer/src/components/ContentSearch.tsx
View File

@ -1,5 +1,3 @@
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'
@ -128,8 +126,6 @@ const findRangesInTarget = (
// eslint-disable-next-line @eslint-react/no-forward-ref
export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
({ searchTarget, filter, includeUser = false, onIncludeUserChange }, ref) => {
const { topicPosition } = useSettings()
const { showTopics } = useShowTopics()
const target: HTMLElement | null = (() => {
if (searchTarget instanceof HTMLElement) {
return searchTarget
@ -337,12 +333,10 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
searchInputFocus()
}
const isRightTopicsVisible = topicPosition === 'right' && showTopics
return (
<Container ref={containerRef} style={enableContentSearch ? {} : { display: 'none' }}>
<NarrowLayout style={{ width: '100%' }}>
<SearchBarContainer $isRightTopicsVisible={isRightTopicsVisible}>
<SearchBarContainer>
<InputWrapper>
<Input
ref={searchInputRef}
@ -411,18 +405,14 @@ const Container = styled.div`
z-index: 2;
`
const SearchBarContainer = styled.div<{ $isRightTopicsVisible: boolean }>`
const SearchBarContainer = styled.div`
border: 1px solid var(--color-primary);
border-radius: 10px;
transition: all 0.2s ease;
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: ${(props) =>
props.$isRightTopicsVisible
? 'min(60%, calc(100vw - 400px))'
: 'min(60%, calc(100vw - 140px))'}; /* 容器2/3宽度，并考虑右侧避让 */
top: 15px;
left: 20px;
right: 20px;
margin-bottom: 5px;
padding: 5px 15px;
display: flex;
@ -458,7 +448,7 @@ const ToolBar = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
gap: tpx;
`
const Separator = styled.div`
@ -473,8 +463,8 @@ const Separator = styled.div`
const SearchResults = styled.div`
display: flex;
justify-content: center;
width: 60px;
margin: 0 1px;
width: 80px;
margin: 0 2px;
flex: 0 0 auto;
color: var(--color-text-1);
font-size: 14px;