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

refactor(Scrollbar, Tabs): simplify component structure and improve styling

Browse Source
This commit is contained in:
kangfenmao 2025-03-27 13:40:09 +08:00
parent 1a85b8bd5d
commit 06ff44f97c
4 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/components/Scrollbar/index.tsx
View File

@ -1,5 +1,5 @@
import { throttle } from 'lodash' import { throttle } from 'lodash'
import { FC, forwardRef, useCallback, useEffect, useRef, useState } from 'react' import { FC, useCallback, useEffect, useRef, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
interface Props extends React.HTMLAttributes<HTMLDivElement> { interface Props extends React.HTMLAttributes<HTMLDivElement> {
@ -7,7 +7,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
ref?: any ref?: any
} }
const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => { const Scrollbar: FC<Props> = ({ ref, ...props }: Props & { ref?: React.RefObject<HTMLDivElement | null> }) => {
const [isScrolling, setIsScrolling] = useState(false) const [isScrolling, setIsScrolling] = useState(false)
const timeoutRef = useRef<NodeJS.Timeout | null>(null) const timeoutRef = useRef<NodeJS.Timeout | null>(null)
@ -35,7 +35,7 @@ const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
{props.children} {props.children}
</Container> </Container>
) )
}) }
const Container = styled.div<{ isScrolling: boolean; right?: boolean }>` const Container = styled.div<{ isScrolling: boolean; right?: boolean }>`
overflow-y: auto; overflow-y: auto;

1
src/renderer/src/pages/home/Tabs/AssistantItem.tsx
View File

@ -153,7 +153,6 @@ const Container = styled.div`
justify-content: space-between; justify-content: space-between;
padding: 7px 10px; padding: 7px 10px;
position: relative; position: relative;
margin: 0 10px;
font-family: Ubuntu; font-family: Ubuntu;
border-radius: var(--list-item-border-radius); border-radius: var(--list-item-border-radius);
border: 0.5px solid transparent; border: 0.5px solid transparent;

4
src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
View File

@ -78,8 +78,7 @@ const Assistants: FC<AssistantsTabProps> = ({
const Container = styled(Scrollbar)` const Container = styled(Scrollbar)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 11px; padding: 10px;
user-select: none;
` `
const AssistantAddItem = styled.div` const AssistantAddItem = styled.div`
@ -88,7 +87,6 @@ const AssistantAddItem = styled.div`
justify-content: space-between; justify-content: space-between;
padding: 7px 12px; padding: 7px 12px;
position: relative; position: relative;
margin: 0 10px;
padding-right: 35px; padding-right: 35px;
font-family: Ubuntu; font-family: Ubuntu;
border-radius: var(--list-item-border-radius); border-radius: var(--list-item-border-radius);

6
src/renderer/src/pages/home/Tabs/TopicsTab.tsx
View File

@ -410,14 +410,11 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
const Container = styled(Scrollbar)` const Container = styled(Scrollbar)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 11px; padding: 10px;
user-select: none;
` `
const TopicListItem = styled.div` const TopicListItem = styled.div`
padding: 7px 12px; padding: 7px 12px;
margin-left: 10px;
margin-right: 4px;
border-radius: var(--list-item-border-radius); border-radius: var(--list-item-border-radius);
font-family: Ubuntu; font-family: Ubuntu;
font-size: 13px; font-size: 13px;
@ -429,6 +426,7 @@ const TopicListItem = styled.div`
cursor: pointer; cursor: pointer;
border: 0.5px solid transparent; border: 0.5px solid transparent;
position: relative; position: relative;
width: calc(var(--assistants-width) - 20px);
.menu { .menu {
opacity: 0; opacity: 0;
color: var(--color-text-3); color: var(--color-text-3);