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

feat: add border to list item

Browse Source
This commit is contained in:
kangfenmao 2024-11-24 01:35:41 +08:00
parent 949a13b021
commit 4cb5c128bb
22 changed files with 82 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/services/WindowService.ts
View File

@ -43,7 +43,7 @@ export class WindowService {
show: true,
autoHideMenuBar: true,
transparent: isMac,
vibrancy: 'sidebar',
vibrancy: 'under-window',
visualEffectState: 'active',
titleBarStyle: 'hidden',
titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,

14
src/renderer/src/assets/styles/index.scss
View File

@ -9,9 +9,9 @@
--color-white-soft: rgba(255, 255, 255, 0.8);
--color-white-mute: rgba(255, 255, 255, 0.94);
--color-black: #0f0f0f;
--color-black-soft: #191919;
--color-black-mute: #242424;
--color-black: #151515;
--color-black-soft: #222222;
--color-black-mute: #333333;
--color-gray-1: #515c67;
--color-gray-2: #414853;
@ -32,8 +32,8 @@
--color-text: var(--color-text-1);
--color-icon: #ffffff99;
--color-icon-white: #ffffff;
--color-border: #ffffff24;
--color-border-soft: #ffffff20;
--color-border: #ffffff22;
--color-border-soft: #ffffff11;
--color-border-mute: #ffffff11;
--color-error: #f44336;
--color-link: #1677ff;
@ -90,8 +90,8 @@ body[theme-mode='light'] {
--color-icon: #00000099;
--color-icon-white: #000000;
--color-border: #00000028;
--color-border-soft: #00000028;
--color-border-mute: #00000011;
--color-border-soft: #00000020;
--color-border-mute: #00000010;
--color-error: #f44336;
--color-link: #1677ff;
--color-code-background: #e3e3e3;

4
src/renderer/src/components/AssistantSettings/index.tsx
View File

@ -143,10 +143,11 @@ const StyledModal = styled(Modal)`
}
.ant-menu-item {
height: 36px;
border-radius: 6px;
color: var(--color-text-2);
display: flex;
align-items: center;
border: 0.5px solid transparent;
border-radius: 6px;
.ant-menu-title-content {
line-height: 36px;
}
@ -157,6 +158,7 @@ const StyledModal = styled(Modal)`
}
.ant-menu-item-selected {
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
.ant-menu-title-content {
color: var(--color-text-1);
font-weight: 500;

10
src/renderer/src/components/Popups/SelectModelPopup.tsx
View File

@ -168,7 +168,15 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
onCancel={onCancel}
afterClose={onClose}
transitionName="ant-move-down"
styles={{ content: { borderRadius: 20, padding: 0, overflow: 'hidden', paddingBottom: 20 } }}
styles={{
content: {
borderRadius: 20,
padding: 0,
overflow: 'hidden',
paddingBottom: 20,
border: '1px solid var(--color-border)'
}
}}
closeIcon={null}
footer={null}>
<HStack style={{ padding: '0 12px', marginTop: 5 }}>

1
src/renderer/src/components/app/Navbar.tsx
View File

@ -38,7 +38,6 @@ const NavbarContainer = styled.div`
max-height: var(--navbar-height);
margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
transition: background-color 0.3s ease;
-webkit-app-region: drag;
`

6
src/renderer/src/components/app/Sidebar.tsx
View File

@ -127,7 +127,6 @@ const Container = styled.div`
height: ${isMac ? 'calc(100vh - var(--navbar-height))' : '100vh'};
-webkit-app-region: drag !important;
margin-top: ${isMac ? 'var(--navbar-height)' : 0};
transition: background-color 0.3s ease;
`
const AvatarImg = styled(Avatar)`
@ -158,14 +157,12 @@ const Icon = styled.div`
align-items: center;
border-radius: 50%;
margin-bottom: 5px;
transition: background-color 0.2s ease;
-webkit-app-region: none;
transition: all 0.2s ease;
border: 0.5px solid transparent;
.iconfont,
.anticon {
color: var(--color-icon);
font-size: 20px;
transition: color 0.2s ease;
text-decoration: none;
}
.anticon {
@ -181,6 +178,7 @@ const Icon = styled.div`
}
&.active {
background-color: var(--color-active);
border: 0.5px solid var(--color-border);
.iconfont,
.anticon {
color: var(--color-icon-white);

6
src/renderer/src/context/AntdProvider.tsx
View File

@ -24,9 +24,9 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
trackBg: 'transparent',
itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
boxShadowTertiary: undefined,
borderRadiusLG: 12,
borderRadiusSM: 12,
borderRadiusXS: 12
borderRadiusLG: 16,
borderRadiusSM: 16,
borderRadiusXS: 16
},
Menu: {
activeBarBorderWidth: 0,

8
src/renderer/src/pages/agents/AgentsPage.tsx
View File

@ -253,11 +253,12 @@ const Tabs = styled(TabsAntd)`
}
.ant-tabs-tab {
margin: 0 !important;
border-radius: 7px;
border-radius: 16px;
margin-bottom: 5px !important;
font-size: 13px;
justify-content: left;
padding: 7px 12px !important;
padding: 7px 15px !important;
border: 0.5px solid transparent;
.ant-tabs-tab-btn {
white-space: nowrap;
overflow: hidden;
@ -270,8 +271,9 @@ const Tabs = styled(TabsAntd)`
}
}
.ant-tabs-tab-active {
background-color: var(--color-background-mute);
background-color: var(--color-background-soft);
border-right: none;
border: 0.5px solid var(--color-border);
}
.ant-tabs-content-holder {
border-left: 0.5px solid var(--color-border);

2
src/renderer/src/pages/agents/components/AgentCard.tsx
View File

@ -81,7 +81,7 @@ const Container = styled.div`
text-align: center;
gap: 10px;
background-color: var(--color-background);
border-radius: 8px;
border-radius: 16px;
position: relative;
overflow: hidden;
cursor: pointer;

12
src/renderer/src/pages/files/FilesPage.tsx
View File

@ -220,7 +220,7 @@ const ImageInfo = styled.div`
const SideNav = styled.div`
width: var(--assistants-width);
border-right: 0.5px solid var(--color-border);
padding: 15px;
padding: 7px 12px;
.ant-menu {
border-inline-end: none !important;
@ -228,18 +228,22 @@ const SideNav = styled.div`
}
.ant-menu-item {
height: 40px;
line-height: 40px;
height: 36px;
line-height: 36px;
margin: 4px 0;
width: 100%;
border-radius: 16px;
border: 0.5px solid transparent;
&:hover {
background-color: var(--color-background-soft);
background-color: var(--color-background-soft) !important;
}
&.ant-menu-item-selected {
background-color: var(--color-background-soft);
color: var(--color-primary);
border: 0.5px solid var(--color-border);
color: var(--color-text);
}
}
`

2
src/renderer/src/pages/history/HistoryPage.tsx
View File

@ -106,7 +106,7 @@ const Header = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px 0;
padding: 12px 0;
width: 100%;
position: relative;
background-color: var(--color-background-mute);

2
src/renderer/src/pages/home/Messages/Message.tsx
View File

@ -216,7 +216,7 @@ const MessageFooter = styled.div`
align-items: center;
padding: 2px 0;
margin-top: 2px;
border-top: 0.5px dashed var(--color-border);
border-top: 1px dotted var(--color-border);
gap: 20px;
`

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

@ -44,7 +44,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
const showRightTopics = showTopics && topicPosition === 'right'
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 2px)`
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
}, [showAssistants, showTopics, topicPosition])
const scrollToBottom = useCallback(() => {

1
src/renderer/src/pages/home/Messages/Prompt.tsx
View File

@ -31,6 +31,7 @@ const Container = styled.div`
margin: 0 20px 0 20px;
border-radius: 6px;
cursor: pointer;
border: 0.5px solid var(--color-border);
`
const Text = styled.div`

1
src/renderer/src/pages/home/Navbar.tsx
View File

@ -101,7 +101,6 @@ const TitleText = styled.span`
margin-left: 5px;
font-family: Ubuntu;
font-size: 13px;
font-weight: 500;
`
export default HeaderNavbar

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

@ -150,10 +150,9 @@ const Assistants: FC<Props> = ({
<AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
{isCurrent && (
<ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
<i className="iconfont icon-gridlines" />
<TopicCount className="topics-count">{assistant.topics.length}</TopicCount>
</ArrowRightButton>
)}
{false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
</AssistantItem>
</Dropdown>
)
@ -175,7 +174,7 @@ const Assistants: FC<Props> = ({
const Container = styled(Scrollbar)`
display: flex;
flex-direction: column;
padding-top: 10px;
padding-top: 11px;
`
const AssistantItem = styled.div`
@ -187,7 +186,8 @@ const AssistantItem = styled.div`
margin: 0 10px;
padding-right: 35px;
font-family: Ubuntu;
border-radius: 17px;
border-radius: 16px;
border: 0.5px solid transparent;
cursor: pointer;
.iconfont {
opacity: 0;
@ -197,16 +197,10 @@ const AssistantItem = styled.div`
background-color: var(--color-background-soft);
}
&.active {
background-color: var(--color-background-mute);
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
.name {
}
.topics-count {
display: none;
}
.iconfont {
opacity: 1;
color: var(--color-text-2);
}
}
`
@ -228,24 +222,16 @@ const ArrowRightButton = styled.div`
height: 22px;
min-width: 22px;
min-height: 22px;
border-radius: 4px;
border-radius: 11px;
position: absolute;
background-color: var(--color-background);
right: 9px;
top: 6px;
.iconfont {
font-size: 12px;
}
`
const TopicCount = styled.div`
color: var(--color-text-2);
color: var(--color-text);
font-size: 10px;
margin-right: 3px;
background-color: var(--color-background-mute);
opacity: 0.8;
width: 20px;
height: 20px;
border-radius: 10px;
display: flex;
flex-direction: row;

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

@ -387,6 +387,7 @@ const Container = styled(Scrollbar)`
flex-direction: column;
padding: 0 10px;
padding-right: 5px;
padding-top: 2px;
`
const Label = styled.p`

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

@ -197,7 +197,9 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
style={{ borderRadius }}
onClick={() => onSwitchTopic(topic)}>
<TopicName className="name">{topic.name.replace('`', '')}</TopicName>
{showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
{showTopicTime && (
<TopicTime className="time">{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>
)}
{isActive && (
<MenuButton
className="menu"
@ -224,13 +226,13 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
const Container = styled(Scrollbar)`
display: flex;
flex-direction: column;
padding-top: 10px;
padding-top: 11px;
`
const TopicListItem = styled.div`
padding: 7px 12px;
margin: 0 10px;
border-radius: 17px;
border-radius: 16px;
font-family: Ubuntu;
font-size: 13px;
display: flex;
@ -239,6 +241,7 @@ const TopicListItem = styled.div`
position: relative;
font-family: Ubuntu;
cursor: pointer;
border: 0.5px solid transparent;
.menu {
opacity: 0;
color: var(--color-text-3);
@ -246,17 +249,16 @@ const TopicListItem = styled.div`
&:hover {
background-color: var(--color-background-soft);
.name {
opacity: 1;
}
}
&.active {
background-color: var(--color-background-mute);
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
.name {
opacity: 1;
}
.menu {
opacity: 1;
background-color: var(--color-background-mute);
background-color: var(--color-background-soft);
&:hover {
color: var(--color-text-2);
}

11
src/renderer/src/pages/home/Tabs/index.tsx
View File

@ -168,11 +168,15 @@ const TabContent = styled.div`
const Segmented = styled(AntSegmented)`
.ant-segmented-item {
overflow: hidden;
transition: none !important;
height: 30px;
line-height: 30px;
background-color: transparent;
}
.ant-segmented-item-selected {
background-color: var(--color-background-mute);
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
transition: none !important;
}
.ant-segmented-item-label {
align-items: center;
@ -195,6 +199,11 @@ const Segmented = styled(AntSegmented)`
.ant-segmented-item-icon + * {
margin-left: 4px;
}
.ant-segmented-thumb {
transition: none !important;
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
}
`
export default HomeTabs

3
src/renderer/src/pages/home/components/SelectModelButton.tsx
View File

@ -45,11 +45,12 @@ const DropdownButton = styled(Button)`
padding: 12px 8px 12px 3px;
-webkit-app-region: none;
box-shadow: none;
background-color: transparent;
border: 1px solid transparent;
`
const ModelName = styled.span`
margin-left: -2px;
font-weight: bolder;
`
export default SelectModelButton

8
src/renderer/src/pages/settings/ProviderSettings/index.tsx
View File

@ -124,7 +124,7 @@ const ProvidersList: FC = () => {
{provider.isSystem ? t(`provider.${provider.id}`) : provider.name}
</ProviderItemName>
{provider.enabled && (
<Tag color="green" style={{ marginLeft: 'auto' }}>
<Tag color="green" style={{ marginLeft: 'auto', borderRadius: 16 }}>
ON
</Tag>
)}
@ -182,14 +182,16 @@ const ProviderListItem = styled.div`
padding: 5px 8px;
width: 100%;
cursor: grab;
border-radius: 5px;
border-radius: 16px;
font-size: 14px;
transition: all 0.2s ease-in-out;
border: 0.5px solid transparent;
&:hover {
background: var(--color-background-soft);
}
&.active {
background: var(--color-background-mute);
background: var(--color-background-soft);
border: 0.5px solid var(--color-border);
font-weight: bold !important;
}
`

6
src/renderer/src/pages/settings/SettingsPage.tsx
View File

@ -116,9 +116,10 @@ const MenuItem = styled.li`
padding: 6px 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
border-radius: 16px;
font-weight: 500;
transition: all 0.2s ease-in-out;
border: 0.5px solid transparent;
.anticon {
font-size: 16px;
opacity: 0.8;
@ -133,7 +134,8 @@ const MenuItem = styled.li`
background: var(--color-background-soft);
}
&.active {
background: var(--color-background-mute);
background: var(--color-background-soft);
border: 0.5px solid var(--color-border);
}
`