whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(ChatNavigation): Adjust navigation position based on topic settings

Browse Source 
This reverts commit aa75f902942ce8a56669bae03ff840a119e242cb.
This commit is contained in:
kangfenmao 2025-03-12 19:20:28 +08:00
parent abecb74135
commit 1de54caa7e
1 changed files with 10 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/renderer/src/pages/home/Messages/ChatNavigation.tsx
View File

@ -11,12 +11,11 @@ interface ChatNavigationProps {
const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => { const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
const { t } = useTranslation() const { t } = useTranslation()
const { showTopics, topicPosition } = useSettings()
const [isVisible, setIsVisible] = useState(false) const [isVisible, setIsVisible] = useState(false)
const [hideTimer, setHideTimer] = useState<NodeJS.Timeout | null>(null) const [hideTimer, setHideTimer] = useState<NodeJS.Timeout | null>(null)
const { topicPosition, showTopics } = useSettings()
// 计算导航按钮的位置 const showRightTopics = topicPosition === 'right' && showTopics
const navigationPosition = showTopics && topicPosition === 'right' ? 'var(--assistants-width)' : '0' const right = showRightTopics ? 'calc(var(--topic-list-width) + 16px)' : '16px'
const resetHideTimer = useCallback(() => { const resetHideTimer = useCallback(() => {
if (hideTimer) { if (hideTimer) {
@ -176,12 +175,8 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
return ( return (
<> <>
<TriggerArea <TriggerArea $right={right} onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => resetHideTimer()} />
onMouseEnter={() => setIsVisible(true)} <NavigationContainer $isVisible={isVisible} $right={right}>
onMouseLeave={() => resetHideTimer()}
$position={navigationPosition}
/>
<NavigationContainer $isVisible={isVisible} $position={navigationPosition}>
<ButtonGroup> <ButtonGroup>
<Tooltip title={t('chat.navigation.prev')} placement="left"> <Tooltip title={t('chat.navigation.prev')} placement="left">
<NavigationButton <NavigationButton
@ -208,27 +203,23 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
) )
} }
interface PositionProps { const TriggerArea = styled.div<{ $right: string }>`
$position: string
}
const TriggerArea = styled.div<PositionProps>`
position: fixed; position: fixed;
right: calc(${(props) => props.$position} + 0px); right: ${(props) => props.$right};
top: 40%; top: 40%;
width: 20px; width: 20px;
height: 20%; height: 20%;
z-index: 998; z-index: 998;
background: transparent;
` `
interface NavigationContainerProps extends PositionProps { interface NavigationContainerProps {
$isVisible: boolean $isVisible: boolean
$right: string
} }
const NavigationContainer = styled.div<NavigationContainerProps>` const NavigationContainer = styled.div<NavigationContainerProps>`
position: fixed; position: fixed;
right: calc(${(props) => props.$position} + 16px); right: ${(props) => props.$right};
top: 50%; top: 50%;
transform: translateY(-50%) translateX(${(props) => (props.$isVisible ? 0 : '100%')}); transform: translateY(-50%) translateX(${(props) => (props.$isVisible ? 0 : '100%')});
z-index: 999; z-index: 999;