✨ feat(config): 增加了对字体 font-family 的配置

frostime · May 25, 2024 · 90f1188 · 90f1188
1 parent 05c0f0c
commit 90f1188
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 0 deletions.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -670,6 +670,7 @@ function _Chat() {
   const session = chatStore.currentSession();
   const config = useAppConfig();
   const fontSize = config.fontSize;
+  const fontFamily = config.fontFamily;
 
   const [showExport, setShowExport] = useState(false);
 
@@ -1420,6 +1421,7 @@ function _Chat() {
                         setUserInput(getMessageTextContent(message));
                       }}
                       fontSize={fontSize}
+                      fontFamily={fontFamily}
                       parentRef={scrollRef}
                       defaultShow={i >= messages.length - 6}
                     />
@@ -1514,6 +1516,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
@@ -591,6 +591,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
@@ -175,6 +175,7 @@ export function Markdown(
     content: string;
     loading?: boolean;
     fontSize?: number;
+    fontFamily?: string;
     parentRef?: RefObject<HTMLDivElement>;
     defaultShow?: boolean;
   } & React.DOMAttributes<HTMLDivElement>,
@@ -186,6 +187,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
@@ -797,6 +797,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
@@ -32,6 +32,7 @@ export const DEFAULT_CONFIG = {
   submitKey: SubmitKey.Enter,
   avatar: "1f603",
   fontSize: 14,
+  fontFamily: `"HarmonyOS Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif`,
   theme: Theme.Auto as Theme,
   tightBorder: !!config?.isApp,
   sendPreviewBubble: true,

diff --git 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(