Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 22:39:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: floating-sidebar header sticky (#6371)

Browse Source
This commit is contained in:
SuYao 2025-05-24 08:55:20 +08:00 committed by GitHub
parent d8aac9ecb8
commit 77cd958d08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/assets/styles/color.scss
View File

@ -60,6 +60,7 @@
--assistants-width: 275px; --assistants-width: 275px;
--topic-list-width: 275px; --topic-list-width: 275px;
--settings-width: 250px; --settings-width: 250px;
--scrollbar-width: 5px;
--chat-background: #111111; --chat-background: #111111;
--chat-background-user: #28b561; --chat-background-user: #28b561;

8
src/renderer/src/components/Popups/FloatingSidebar.tsx
View File

@ -5,8 +5,6 @@ import { FC, useEffect, useState } from 'react'
import { useHotkeys } from 'react-hotkeys-hook' import { useHotkeys } from 'react-hotkeys-hook'
import styled from 'styled-components' import styled from 'styled-components'
import Scrollbar from '../Scrollbar'
interface Props { interface Props {
children: React.ReactNode children: React.ReactNode
activeAssistant: Assistant activeAssistant: Assistant
@ -55,7 +53,8 @@ const FloatingSidebar: FC<Props> = ({
forceToSeeAllTab={true} forceToSeeAllTab={true}
style={{ style={{
background: 'transparent', background: 'transparent',
border: 'none' border: 'none',
maxHeight: maxHeight
}} }}
/> />
</PopoverContent> </PopoverContent>
@ -81,9 +80,8 @@ const FloatingSidebar: FC<Props> = ({
) )
} }
const PopoverContent = styled(Scrollbar)<{ maxHeight: number }>` const PopoverContent = styled.div<{ maxHeight: number }>`
max-height: ${(props) => props.maxHeight}px; max-height: ${(props) => props.maxHeight}px;
overflow-y: auto;
` `
export default FloatingSidebar export default FloatingSidebar

6
src/renderer/src/pages/home/Chat.tsx
View File

@ -36,9 +36,9 @@ const Chat: FC<Props> = (props) => {
const maxWidth = useMemo(() => { const maxWidth = useMemo(() => {
const showRightTopics = showTopics && topicPosition === 'right' const showRightTopics = showTopics && topicPosition === 'right'
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : '' const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : '' const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)` return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
}, [showAssistants, showTopics, topicPosition]) }, [showAssistants, showTopics, topicPosition])
useHotkeys('esc', () => { useHotkeys('esc', () => {

6
src/renderer/src/pages/home/Messages/Messages.tsx
View File

@ -86,9 +86,9 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
const maxWidth = useMemo(() => { const maxWidth = useMemo(() => {
const showRightTopics = showTopics && topicPosition === 'right' const showRightTopics = showTopics && topicPosition === 'right'
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : '' const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : '' const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)` return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
}, [showAssistants, showTopics, topicPosition]) }, [showAssistants, showTopics, topicPosition])
const scrollToBottom = useCallback(() => { const scrollToBottom = useCallback(() => {