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

feat(ui): optimize messages ui styles

Browse Source
This commit is contained in:
kangfenmao 2024-07-24 19:17:58 +08:00
parent 74df29604b
commit d21a4dce92
10 changed files with 23 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -33,7 +33,6 @@
"@electron-toolkit/eslint-config-prettier": "^2.0.0",
"@electron-toolkit/eslint-config-ts": "^1.0.1",
"@electron-toolkit/tsconfig": "^1.0.1",
"@fontsource/inter": "^5.0.18",
"@hello-pangea/dnd": "^16.6.0",
"@kangfenmao/keyv-storage": "^0.1.0",
"@reduxjs/toolkit": "^2.2.5",

1
src/renderer/src/App.tsx
View File

@ -1,4 +1,3 @@
import '@fontsource/inter'
import store, { persistor } from '@renderer/store'
import { ConfigProvider } from 'antd'
import { Provider } from 'react-redux'

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

@ -1,5 +1,6 @@
@import 'https://at.alicdn.com/t/c/font_4563475_hrx8c92awui.css';
@import './markdown.scss';
@import './scrollbar.scss';
// @font-face {
// font-family: 'Playwrite';
@ -67,19 +68,8 @@ body {
line-height: 1.6;
overflow: hidden;
background-size: cover;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

2
src/renderer/src/assets/styles/markdown.scss
View File

@ -1,6 +1,6 @@
.markdown {
color: #f1f1f1;
font-size: 16px;
font-size: 15px;
line-height: 1.6;
user-select: text;

4
src/renderer/src/assets/styles/scrollbar.scss
View File

@ -8,8 +8,8 @@
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.15);
&:hover {
background: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.3);
}
}

5
src/renderer/src/hooks/useAppInit.ts
View File

@ -5,7 +5,6 @@ import { setAvatar } from '@renderer/store/runtime'
import { runAsyncFunction } from '@renderer/utils'
import { useEffect } from 'react'
import { useSettings } from './useSettings'
import { isWindows } from '@renderer/config/constant'
export function useAppInit() {
const dispatch = useAppDispatch()
@ -29,8 +28,4 @@ export function useAppInit() {
useEffect(() => {
proxyUrl && window.api.setProxy(proxyUrl)
}, [proxyUrl])
useEffect(() => {
isWindows && import('@renderer/assets/styles/scrollbar.scss')
}, [])
}

12
src/renderer/src/pages/home/components/Message.tsx
View File

@ -97,11 +97,6 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
<MessageTime>{dayjs(message.createdAt).format('MM/DD HH:mm')}</MessageTime>
</UserWrap>
</AvatarWrapper>
{message.usage && (
<MessageMetadata>
Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}
</MessageMetadata>
)}
</MessageHeader>
<MessageContent style={{ fontFamily }}>
{message.status === 'sending' && (
@ -114,8 +109,13 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
{getMessageContent(message)}
</Markdown>
)}
{message.usage && (
<MessageMetadata>
Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}
</MessageMetadata>
)}
{showMenu && (
<MenusBar className={`menubar ${isLastMessage && 'show'} ${isUserMessage && 'user'}`}>
<MenusBar className={`menubar ${isLastMessage && 'show'} ${(!isLastMessage || isUserMessage) && 'user'}`}>
{message.role === 'user' && (
<Tooltip title="Edit" mouseEnterDelay={0.8}>
<ActionButton>

4
src/renderer/src/pages/home/components/RightSidebar.tsx
View File

@ -77,7 +77,7 @@ const Container = styled.div`
const Tabs = styled.div`
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--color-border);
border-bottom: 0.5px solid var(--color-border);
padding: 0 10px;
`
@ -93,7 +93,7 @@ const Tab = styled.div`
color: #8a8a8a;
border-bottom: 1px solid transparent;
&.active {
color: white;
color: #a8a8a8;
font-weight: 600;
}
`

14
src/renderer/src/pages/home/components/SettingsTab.tsx
View File

@ -119,7 +119,7 @@ const SettingsTab: FC<Props> = (props) => {
<Slider
min={0}
max={20}
marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('assistant.settings.max') }}
marks={{ 0: '0', 10: '10', 20: t('assistant.settings.max') }}
onChange={onConextCountChange}
value={typeof contextCount === 'number' ? contextCount : 0}
step={1}
@ -142,12 +142,12 @@ const SettingsTab: FC<Props> = (props) => {
<SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.messages.divider')}</SettingRowTitle>
<SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
<Switch checked={showMessageDivider} onChange={(checked) => dispatch(setShowMessageDivider(checked))} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.messages.use_serif_font')}</SettingRowTitle>
<SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
<Switch
checked={messageFont === 'serif'}
onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
@ -157,7 +157,7 @@ const SettingsTab: FC<Props> = (props) => {
<SettingSubtitle style={{ marginTop: 20 }}>{t('settings.messages.input.title')}</SettingSubtitle>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitle>
<SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
<Switch
checked={showInputEstimatedTokens}
onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
@ -169,7 +169,7 @@ const SettingsTab: FC<Props> = (props) => {
}
const Container = styled.div`
padding: 0 10px;
padding: 0 15px;
`
const InputNumberic = styled(InputNumber)`
@ -195,4 +195,8 @@ const QuestionIcon = styled(QuestionCircleOutlined)`
color: var(--color-text-3);
`
const SettingRowTitleSmall = styled(SettingRowTitle)`
font-size: 13px;
`
export default SettingsTab

8
yarn.lock
View File

@ -961,13 +961,6 @@ __metadata:
languageName: node
linkType: hard
"@fontsource/inter@npm:^5.0.18":
version: 5.0.18
resolution: "@fontsource/inter@npm:5.0.18"
checksum: 10c0/87863160b18a3a2b2cc0b2949b41b4072f422efb672f183a8fa2ae19bd803da18ec24a65344c42c1686c73e1b65bb4a7cd64ce5c0f015872c5f5dcba4e64bf92
languageName: node
linkType: hard
"@hello-pangea/dnd@npm:^16.6.0":
version: 16.6.0
resolution: "@hello-pangea/dnd@npm:16.6.0"
@ -3413,7 +3406,6 @@ __metadata:
"@electron-toolkit/preload": "npm:^3.0.0"
"@electron-toolkit/tsconfig": "npm:^1.0.1"
"@electron-toolkit/utils": "npm:^3.0.0"
"@fontsource/inter": "npm:^5.0.18"
"@hello-pangea/dnd": "npm:^16.6.0"
"@kangfenmao/keyv-storage": "npm:^0.1.0"
"@reduxjs/toolkit": "npm:^2.2.5"