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(