From c42bb4d72e4d36788193d8d2ae228c7a43b37150 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Wed, 24 Jul 2024 12:25:36 +0800 Subject: [PATCH] feat(settings): add messageFont setting --- src/renderer/src/assets/styles/markdown.scss | 1 - src/renderer/src/components/app/Sidebar.tsx | 2 +- src/renderer/src/i18n/index.ts | 4 ++ .../src/pages/home/components/Message.tsx | 38 ++++++++++--------- .../home/components/NavigationCenter.tsx | 2 +- .../src/pages/settings/GeneralSettings.tsx | 14 ++++++- .../src/pages/settings/SettingsPage.tsx | 6 +-- src/renderer/src/store/index.ts | 2 +- src/renderer/src/store/migrate.ts | 29 +++++++------- src/renderer/src/store/settings.ts | 10 ++++- 10 files changed, 63 insertions(+), 45 deletions(-) diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss index 206ddbed8c..51bfd2dd32 100644 --- a/src/renderer/src/assets/styles/markdown.scss +++ b/src/renderer/src/assets/styles/markdown.scss @@ -1,6 +1,5 @@ .markdown { color: #f1f1f1; - font-family: Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 16px; line-height: 1.6; user-select: text; diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx index 74fd0680aa..c610f3409c 100644 --- a/src/renderer/src/components/app/Sidebar.tsx +++ b/src/renderer/src/components/app/Sidebar.tsx @@ -32,7 +32,7 @@ const Sidebar: FC = () => { - + diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index b8e4cafc95..5daa5eae73 100644 --- a/src/renderer/src/i18n/index.ts +++ b/src/renderer/src/i18n/index.ts @@ -105,7 +105,9 @@ const resources = { assistant: 'Default Assistant', about: 'About & Feedback', 'general.title': 'General Settings', + 'general.message.title': 'Message Settings', 'general.message.divider': 'Show divider between messages', + 'general.message.use_serif_font': 'Use serif font', 'general.user_name': 'User Name', 'general.user_name.placeholder': 'Enter your name', 'provider.api_key': 'API Key', @@ -257,7 +259,9 @@ const resources = { 'general.title': '常规设置', 'general.user_name': '用户名', 'general.user_name.placeholder': '请输入用户名', + 'general.message.title': '消息设置', 'general.message.divider': '消息分割线', + 'general.message.use_serif_font': '使用衬线字体', 'provider.api_key': 'API 密钥', 'provider.check': '检查', 'provider.get_api_key': '点击这里获取密钥', diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx index 5494ac2a30..cffd45c188 100644 --- a/src/renderer/src/pages/home/components/Message.tsx +++ b/src/renderer/src/pages/home/components/Message.tsx @@ -1,21 +1,20 @@ -import { Message } from '@renderer/types' -import { Avatar, Tooltip } from 'antd' -import { FC } from 'react' -import styled from 'styled-components' -import useAvatar from '@renderer/hooks/useAvatar' -import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons' -import Markdown from 'react-markdown' -import CodeBlock from './CodeBlock' -import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' -import { getModelLogo } from '@renderer/config/provider' +import { CopyOutlined, DeleteOutlined, EditOutlined, SyncOutlined } from '@ant-design/icons' import Logo from '@renderer/assets/images/logo.png' -import { SyncOutlined } from '@ant-design/icons' -import { firstLetter } from '@renderer/utils' -import { useTranslation } from 'react-i18next' -import { isEmpty, upperFirst } from 'lodash' -import dayjs from 'dayjs' +import { getModelLogo } from '@renderer/config/provider' import { useAssistant } from '@renderer/hooks/useAssistant' +import useAvatar from '@renderer/hooks/useAvatar' import { useSettings } from '@renderer/hooks/useSettings' +import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' +import { Message } from '@renderer/types' +import { firstLetter } from '@renderer/utils' +import { Avatar, Tooltip } from 'antd' +import dayjs from 'dayjs' +import { isEmpty, upperFirst } from 'lodash' +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import Markdown from 'react-markdown' +import styled from 'styled-components' +import CodeBlock from './CodeBlock' interface Props { message: Message @@ -29,7 +28,7 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = const avatar = useAvatar() const { t } = useTranslation() const { assistant } = useAssistant(message.assistantId) - const { userName, showMessageDivider } = useSettings() + const { userName, showMessageDivider, messageFont } = useSettings() const isLastMessage = index === 0 const isUserMessage = message.role === 'user' @@ -79,8 +78,11 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = return userName || t('common.you') } + const fontFamily = messageFont === 'serif' ? "Georgia, Cambria, 'Times New Roman', Times, serif" : undefined + const messageBorder = showMessageDivider ? undefined : 'none' + return ( - + {message.role === 'assistant' ? ( @@ -101,7 +103,7 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = )} - + {message.status === 'sending' && ( diff --git a/src/renderer/src/pages/home/components/NavigationCenter.tsx b/src/renderer/src/pages/home/components/NavigationCenter.tsx index 9f682f2e14..6e3151bb4d 100644 --- a/src/renderer/src/pages/home/components/NavigationCenter.tsx +++ b/src/renderer/src/pages/home/components/NavigationCenter.tsx @@ -31,7 +31,7 @@ const NavigationCenter: FC = ({ activeAssistant }) => { type: 'group', children: p.models.map((m) => ({ key: m.id, - label: m.name, + label: upperFirst(m.name), style: m.id === model?.id ? { color: colorPrimary } : undefined, onClick: () => setModel(m) })) diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx index 119747b874..2370b9fa6b 100644 --- a/src/renderer/src/pages/settings/GeneralSettings.tsx +++ b/src/renderer/src/pages/settings/GeneralSettings.tsx @@ -8,14 +8,14 @@ import useAvatar from '@renderer/hooks/useAvatar' import { useAppDispatch } from '@renderer/store' import { setAvatar } from '@renderer/store/runtime' import { useSettings } from '@renderer/hooks/useSettings' -import { setLanguage, setShowMessageDivider, setUserName } from '@renderer/store/settings' +import { setLanguage, setMessageFont, setShowMessageDivider, setUserName } from '@renderer/store/settings' import { useTranslation } from 'react-i18next' import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings' import i18n from '@renderer/i18n' const GeneralSettings: FC = () => { const avatar = useAvatar() - const { language, proxyUrl: storeProxyUrl, userName, showMessageDivider } = useSettings() + const { language, proxyUrl: storeProxyUrl, userName, showMessageDivider, messageFont } = useSettings() const [proxyUrl, setProxyUrl] = useState(storeProxyUrl) const dispatch = useAppDispatch() const { t } = useTranslation() @@ -97,11 +97,21 @@ const GeneralSettings: FC = () => { /> + {t('settings.general.message.title')} + {t('settings.general.message.divider')} dispatch(setShowMessageDivider(checked))} /> + + {t('settings.general.message.use_serif_font')} + dispatch(setMessageFont(checked ? 'serif' : 'system'))} + /> + + ) } diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx index 0d0c0ca9e0..bb0b0edf07 100644 --- a/src/renderer/src/pages/settings/SettingsPage.tsx +++ b/src/renderer/src/pages/settings/SettingsPage.tsx @@ -22,6 +22,9 @@ const SettingsPage: FC = () => { + + {t('settings.general')} + {t('settings.provider')} @@ -31,9 +34,6 @@ const SettingsPage: FC = () => { {t('settings.assistant')} - - {t('settings.general')} - {t('settings.about')} diff --git a/src/renderer/src/store/index.ts b/src/renderer/src/store/index.ts index 7558501161..1378e533b7 100644 --- a/src/renderer/src/store/index.ts +++ b/src/renderer/src/store/index.ts @@ -19,7 +19,7 @@ const persistedReducer = persistReducer( { key: 'cherry-studio', storage, - version: 15, + version: 16, blacklist: ['runtime'], migrate }, diff --git a/src/renderer/src/store/migrate.ts b/src/renderer/src/store/migrate.ts index 00a8c67545..7867698ebc 100644 --- a/src/renderer/src/store/migrate.ts +++ b/src/renderer/src/store/migrate.ts @@ -5,8 +5,7 @@ import { isEmpty } from 'lodash' import i18n from '@renderer/i18n' import { Assistant } from '@renderer/types' -const migrate = createMigrate({ - // @ts-ignore store type is unknown +const migrateConfig = { '2': (state: RootState) => { return { ...state, @@ -26,7 +25,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '3': (state: RootState) => { return { ...state, @@ -46,7 +44,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '4': (state: RootState) => { return { ...state, @@ -66,7 +63,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '5': (state: RootState) => { return { ...state, @@ -86,7 +82,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '6': (state: RootState) => { return { ...state, @@ -106,7 +101,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '7': (state: RootState) => { return { ...state, @@ -116,7 +110,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '8': (state: RootState) => { const fixAssistantName = (assistant: Assistant) => { if (isEmpty(assistant.name)) { @@ -142,7 +135,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '9': (state: RootState) => { return { ...state, @@ -157,7 +149,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '10': (state: RootState) => { return { ...state, @@ -178,7 +169,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '11': (state: RootState) => { return { ...state, @@ -208,7 +198,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '12': (state: RootState) => { return { ...state, @@ -229,7 +218,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '13': (state: RootState) => { return { ...state, @@ -244,7 +232,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '14': (state: RootState) => { return { ...state, @@ -255,7 +242,6 @@ const migrate = createMigrate({ } } }, - // @ts-ignore store type is unknown '15': (state: RootState) => { return { ...state, @@ -265,7 +251,18 @@ const migrate = createMigrate({ showMessageDivider: true } } + }, + '16': (state: RootState) => { + return { + ...state, + settings: { + ...state.settings, + messageFont: 'system' + } + } } -}) +} + +const migrate = createMigrate(migrateConfig as any) export default migrate diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts index 317c287a03..284cc76109 100644 --- a/src/renderer/src/store/settings.ts +++ b/src/renderer/src/store/settings.ts @@ -10,6 +10,7 @@ export interface SettingsState { proxyUrl?: string userName: string showMessageDivider: boolean + messageFont: 'system' | 'serif' } const initialState: SettingsState = { @@ -19,7 +20,8 @@ const initialState: SettingsState = { language: navigator.language, proxyUrl: undefined, userName: '', - showMessageDivider: true + showMessageDivider: true, + messageFont: 'system' } const settingsSlice = createSlice({ @@ -46,6 +48,9 @@ const settingsSlice = createSlice({ }, setShowMessageDivider: (state, action: PayloadAction) => { state.showMessageDivider = action.payload + }, + setMessageFont: (state, action: PayloadAction<'system' | 'serif'>) => { + state.messageFont = action.payload } } }) @@ -57,7 +62,8 @@ export const { setLanguage, setProxyUrl, setUserName, - setShowMessageDivider + setShowMessageDivider, + setMessageFont } = settingsSlice.actions export default settingsSlice.reducer