feat: use poppins fonts

This commit is contained in:
kangfenmao 2024-07-31 23:20:28 +08:00
parent c36075f0b5
commit c53e35db76
13 changed files with 73 additions and 35 deletions

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,47 @@
@font-face {
font-family: 'Poppins';
src: url(Poppins-Thin.ttf) format('truetype');
font-weight: 100;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-ExtraLight.ttf) format('truetype');
font-weight: 200;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Light.ttf) format('truetype');
font-weight: 300;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Regular.ttf) format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Medium.ttf) format('truetype');
font-weight: 500;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-SemiBold.ttf) format('truetype');
font-weight: 600;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Bold.ttf) format('truetype');
font-weight: 700;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-ExtraBold.ttf) format('truetype');
font-weight: 800;
}

View File

@ -1,7 +1,7 @@
@import '../fonts/icon-fonts/iconfont.css';
@import './markdown.scss'; @import './markdown.scss';
@import './scrollbar.scss'; @import './scrollbar.scss';
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import '../fonts/icon-fonts/iconfont.css';
@import '../fonts/Poppins/Poppins.css';
:root { :root {
--color-white: #ffffff; --color-white: #ffffff;
@ -46,7 +46,7 @@
--topic-list-width: 260px; --topic-list-width: 260px;
--settings-width: var(--assistants-width); --settings-width: var(--assistants-width);
--status-bar-height: 40px; --status-bar-height: 40px;
--input-bar-height: 130px; --input-bar-height: 115px;
} }
body[theme-mode='light'] { body[theme-mode='light'] {
@ -83,8 +83,8 @@ body[theme-mode='light'] {
--color-scrollbar-thumb: rgba(0, 0, 0, 0.15); --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
--color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3); --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
--navbar-background: rgba(255, 255, 255, 0.6); --navbar-background: rgba(255, 255, 255, 0.75);
--sidebar-background: rgba(255, 255, 255, 0.6); --sidebar-background: rgba(255, 255, 255, 0.75);
} }
*, *,

View File

@ -141,7 +141,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
return ( return (
<Container id="inputbar" style={{ minHeight: expended ? '100%' : 'var(--input-bar-height)' }}> <Container id="inputbar" style={{ minHeight: expended ? '100%' : 'var(--input-bar-height)' }}>
<Toolbar> <Toolbar onDoubleClick={() => setExpend(!expended)}>
<ToolbarMenu> <ToolbarMenu>
<Tooltip placement="top" title={t('assistant.input.new_chat')} arrow> <Tooltip placement="top" title={t('assistant.input.new_chat')} arrow>
<ToolbarButton type="text" onClick={addNewTopic}> <ToolbarButton type="text" onClick={addNewTopic}>
@ -171,6 +171,17 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
<ControlOutlined /> <ControlOutlined />
</ToolbarButton> </ToolbarButton>
</Tooltip> </Tooltip>
<Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow>
<ToolbarButton type="text" onClick={() => setExpend(!expended)}>
{expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</ToolbarButton>
</Tooltip>
{showInputEstimatedTokens && (
<TextCount>
<HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T
{`${inputTokenCount}/${estimateTokenCount}`}
</TextCount>
)}
</ToolbarMenu> </ToolbarMenu>
<ToolbarMenu> <ToolbarMenu>
{generating && ( {generating && (
@ -180,11 +191,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
</ToolbarButton> </ToolbarButton>
</Tooltip> </Tooltip>
)} )}
<Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow> <SendMessageButton sendMessage={sendMessage} />
<ToolbarButton type="text" onClick={() => setExpend(!expended)}>
{expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</ToolbarButton>
</Tooltip>
</ToolbarMenu> </ToolbarMenu>
</Toolbar> </Toolbar>
<Textarea <Textarea
@ -198,15 +205,6 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
ref={inputRef} ref={inputRef}
styles={{ textarea: { paddingLeft: 0 } }} styles={{ textarea: { paddingLeft: 0 } }}
/> />
<Footer>
{showInputEstimatedTokens && (
<TextCount>
<HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T
{`${inputTokenCount}/${estimateTokenCount}`}
</TextCount>
)}
<SendMessageButton sendMessage={sendMessage} />
</Footer>
</Container> </Container>
) )
} }
@ -215,9 +213,7 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: var(--input-bar-height);
border-top: 0.5px solid var(--color-border); border-top: 0.5px solid var(--color-border);
padding: 5px 10px;
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
` `
@ -227,14 +223,14 @@ const Textarea = styled(TextArea)`
border-radius: 0; border-radius: 0;
display: flex; display: flex;
flex: 1; flex: 1;
margin-left: 6px; margin: 0 15px 5px 15px;
` `
const Toolbar = styled.div` const Toolbar = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 5px; padding: 3px 10px;
` `
const ToolbarMenu = styled.div` const ToolbarMenu = styled.div`
@ -263,19 +259,11 @@ const ToolbarButton = styled(Button)`
} }
` `
const Footer = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-bottom: 5px;
`
const TextCount = styled.div` const TextCount = styled.div`
font-size: 11px; font-size: 11px;
color: var(--color-text-3); color: var(--color-text-3);
z-index: 10; z-index: 10;
padding: 2px 8px; padding: 2px;
border-top-left-radius: 7px; border-top-left-radius: 7px;
user-select: none; user-select: none;
margin-right: 10px; margin-right: 10px;

View File

@ -3,7 +3,7 @@ import { Dropdown, MenuProps } from 'antd'
import { FC } from 'react' import { FC } from 'react'
import { ArrowUpOutlined, EnterOutlined } from '@ant-design/icons' import { ArrowUpOutlined, EnterOutlined } from '@ant-design/icons'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { DownOutlined } from '@ant-design/icons' import { SendOutlined } from '@ant-design/icons'
interface Props { interface Props {
sendMessage: () => void sendMessage: () => void
@ -30,12 +30,15 @@ const SendMessageButton: FC<Props> = ({ sendMessage }) => {
return ( return (
<Dropdown.Button <Dropdown.Button
size="small"
onClick={sendMessage} onClick={sendMessage}
trigger={['click']} trigger={['click']}
placement="topLeft"
arrow
menu={{ items: sendSettingItems, selectable: true, defaultSelectedKeys: [sendMessageShortcut] }} menu={{ items: sendSettingItems, selectable: true, defaultSelectedKeys: [sendMessageShortcut] }}
icon={<DownOutlined />}
style={{ width: 'auto' }}> style={{ width: 'auto' }}>
{t('assistant.input.send')} {t('assistant.input.send')}
<SendOutlined />
</Dropdown.Button> </Dropdown.Button>
) )
} }