From b6a022b0ef9dc7242b572089f3a1c8a08215bfd1 Mon Sep 17 00:00:00 2001 From: frostime <frostime@foxmail.com> Date: Sat, 3 Aug 2024 16:04:20 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(config):=20Set=20markdown's=20?= =?UTF-8?q?font-family?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/chat.tsx | 3 +++ app/components/exporter.tsx | 1 + app/components/markdown.tsx | 2 ++ app/components/settings.tsx | 13 +++++++++++++ app/store/config.ts | 1 + app/utils.ts | 1 + 6 files changed, 21 insertions(+) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 785b1f7cd9c..ade30967584 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -732,6 +732,7 @@ function _Chat() { const session = chatStore.currentSession(); const config = useAppConfig(); const fontSize = config.fontSize; + const fontFamily = config.fontFamily; const [showExport, setShowExport] = useState(false); @@ -1482,6 +1483,7 @@ function _Chat() { setUserInput(getMessageTextContent(message)); }} fontSize={fontSize} + fontFamily={fontFamily} parentRef={scrollRef} defaultShow={i >= messages.length - 6} /> @@ -1576,6 +1578,7 @@ function _Chat() { autoFocus={autoFocus} style={{ fontSize: config.fontSize, + fontFamily: config.fontFamily, }} /> {attachImages.length != 0 && ( diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx index 8210f61fb8f..1771cc9b013 100644 --- a/app/components/exporter.tsx +++ b/app/components/exporter.tsx @@ -583,6 +583,7 @@ export function ImagePreviewer(props: { <Markdown content={getMessageTextContent(m)} fontSize={config.fontSize} + fontFamily={config.fontFamily} defaultShow /> {getMessageImages(m).length == 1 && ( diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index c12daed6468..1531d2ff0e0 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -232,6 +232,7 @@ export function Markdown( content: string; loading?: boolean; fontSize?: number; + fontFamily?: string; parentRef?: RefObject<HTMLDivElement>; defaultShow?: boolean; } & React.DOMAttributes<HTMLDivElement>, @@ -243,6 +244,7 @@ export function Markdown( className="markdown-body" style={{ fontSize: `${props.fontSize ?? 14}px`, + fontFamily: props.fontFamily || "inherit", }} ref={mdRef} onContextMenu={props.onContextMenu} diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 3197812259e..f3e3e1c6723 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1316,6 +1316,19 @@ export function Settings() { ></InputRange> </ListItem> + <ListItem title="字体" subTitle="设置全局字体"> + <input + type="text" + value={config.fontFamily} + placeholder="CSS Font Family" + onChange={(e) => + updateConfig( + (config) => (config.fontFamily = e.currentTarget.value), + ) + } + ></input> + </ListItem> + <ListItem title={Locale.Settings.AutoGenerateTitle.Title} subTitle={Locale.Settings.AutoGenerateTitle.SubTitle} diff --git a/app/store/config.ts b/app/store/config.ts index 1eaafe12b1d..a451c2f3f43 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -33,6 +33,7 @@ export const DEFAULT_CONFIG = { submitKey: SubmitKey.Enter, avatar: "1f603", fontSize: 14, + fontFamily: "", theme: Theme.Auto as Theme, tightBorder: !!config?.isApp, sendPreviewBubble: true, diff --git a/app/utils.ts b/app/utils.ts index 2f2c8ae95ab..68be8d1f7aa 100644 --- a/app/utils.ts +++ b/app/utils.ts @@ -194,6 +194,7 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) { measureDom.style.width = width + "px"; measureDom.innerText = dom.value !== "" ? dom.value : "1"; measureDom.style.fontSize = dom.style.fontSize; + measureDom.style.fontFamily = dom.style.fontFamily; const endWithEmptyLine = dom.value.endsWith("\n"); const height = parseFloat(window.getComputedStyle(measureDom).height); const singleLineHeight = parseFloat(