feat: change assistant sidebar width

This commit is contained in:
kangfenmao 2024-09-03 23:37:40 +08:00
parent 303a446dee
commit c33f9228d3
3 changed files with 28 additions and 20 deletions

View File

@ -48,8 +48,8 @@
--status-bar-height: 40px; --status-bar-height: 40px;
--input-bar-height: 85px; --input-bar-height: 85px;
--assistants-width: 245px; --assistants-width: 300px;
--topic-list-width: 260px; --topic-list-width: 300px;
--settings-width: var(--assistants-width); --settings-width: var(--assistants-width);
} }

View File

@ -30,7 +30,8 @@ const resources = {
search: 'Search', search: 'Search',
default: 'Default', default: 'Default',
warning: 'Warning', warning: 'Warning',
back: 'Back' back: 'Back',
chat: 'Chat'
}, },
button: { button: {
add: 'Add', add: 'Add',
@ -253,7 +254,7 @@ const resources = {
topics: '话题', topics: '话题',
docs: '文档', docs: '文档',
and: '和', and: '和',
assistant: '助手', assistant: '智能体',
name: '名称', name: '名称',
description: '描述', description: '描述',
prompt: '提示词', prompt: '提示词',
@ -270,7 +271,8 @@ const resources = {
search: '搜索', search: '搜索',
default: '默认', default: '默认',
warning: '警告', warning: '警告',
back: '返回' back: '返回',
chat: '聊天'
}, },
button: { button: {
add: '添加', add: '添加',

View File

@ -1,5 +1,6 @@
import { ArrowLeftOutlined } from '@ant-design/icons' import { ArrowLeftOutlined } from '@ant-design/icons'
import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar' import { Navbar, NavbarCenter, NavbarLeft } from '@renderer/components/app/Navbar'
import { HStack } from '@renderer/components/Layout'
import { isMac, isWindows } from '@renderer/config/constant' import { isMac, isWindows } from '@renderer/config/constant'
import { useTheme } from '@renderer/context/ThemeProvider' import { useTheme } from '@renderer/context/ThemeProvider'
import { useAssistant, useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant' import { useAssistant, useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
@ -63,27 +64,28 @@ const HomePage: FC = () => {
{showAssistants && ( {showAssistants && (
<NavbarLeft <NavbarLeft
style={{ justifyContent: 'space-between', alignItems: 'center', borderRight: 'none', padding: '0 8px' }}> style={{ justifyContent: 'space-between', alignItems: 'center', borderRight: 'none', padding: '0 8px' }}>
<NavigtaionBack onClick={() => setShowTopics(false)} style={{ opacity: showTopics ? 1 : 0 }}> <NavigtaionBack onClick={() => setShowTopics(false)}>
<ArrowLeftOutlined /> {showTopics && <ArrowLeftOutlined />}
<NavigationBackTitle>{t('common.back')}</NavigationBackTitle> <NavigationBackTitle>{showTopics ? t('common.back') : t('common.chat')}</NavigationBackTitle>
</NavigtaionBack> </NavigtaionBack>
<NewButton onClick={onCreate}> <NewButton onClick={onCreate}>
<i className="iconfont icon-a-addchat"></i> <i className="iconfont icon-a-addchat"></i>
</NewButton> </NewButton>
</NavbarLeft> </NavbarLeft>
)} )}
<NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}> <NavbarCenter
<AssistantName>{activeAssistant?.name || t('chat.default.name')}</AssistantName> style={{ paddingLeft: isMac ? 16 : 8, justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12 }}>
<SelectModelButton assistant={activeAssistant} /> <HStack alignItems="center">
</NavbarCenter> <AssistantName>{activeAssistant?.name || t('chat.default.name')}</AssistantName>
<NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 12 }}> <SelectModelButton assistant={activeAssistant} />
</HStack>
<ThemeSwitch <ThemeSwitch
checkedChildren={<i className="iconfont icon-theme icon-dark1" />} checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />} unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
checked={theme === 'dark'} checked={theme === 'dark'}
onChange={toggleTheme} onChange={toggleTheme}
/> />
</NavbarRight> </NavbarCenter>
</Navbar> </Navbar>
<ContentContainer> <ContentContainer>
{showAssistants && ( {showAssistants && (
@ -123,25 +125,29 @@ const NavigtaionBack = styled.div`
justify-content: flex-start; justify-content: flex-start;
gap: 10px; gap: 10px;
cursor: pointer; cursor: pointer;
margin-left: ${isMac ? '16px' : '4px'}; margin-left: ${isMac ? '14px' : '2px'};
-webkit-app-region: none; -webkit-app-region: none;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
color: var(--color-icon);
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
padding: 2px 8px;
border-radius: 6px;
&:hover { &:hover {
color: var(--color-text-2); background-color: var(--color-background-mute);
color: var(--color-text-1);
} }
` `
const NavigationBackTitle = styled.div` const NavigationBackTitle = styled.div`
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 800;
font-family: Ubuntu;
` `
const AssistantName = styled.span` const AssistantName = styled.span`
margin-left: 5px; margin-left: 5px;
margin-right: 10px; margin-right: 10px;
font-family: Ubuntu; font-family: Ubuntu;
font-weight: 800;
` `
export const NewButton = styled.div` export const NewButton = styled.div`