From 9ff336c2b070c05441ec9c38724fc3a480f748b6 Mon Sep 17 00:00:00 2001
From: fullex <0xfullex@gmail.com>
Date: Mon, 19 May 2025 00:25:43 +0800
Subject: [PATCH] refactor: simplify font family handling and improve layout
 styles in MessageTools and ThinkingBlock components

---
 src/renderer/src/assets/styles/index.scss     | 45 +++++++++----------
 .../home/Messages/Blocks/ThinkingBlock.tsx    | 12 +++--
 .../src/pages/home/Messages/MessageTools.tsx  | 17 ++++---
 3 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 17bc04d6cc..67ebf80082 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -8,13 +8,6 @@
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
 
-body {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 *,
 *::before,
 *::after {
@@ -31,8 +24,18 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
-ul {
-  list-style: none;
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
 }
 
 body {
@@ -44,9 +47,15 @@ body {
   overflow: hidden;
   font-family: var(--font-family);
   text-rendering: optimizeLegibility;
+  transition: background-color 0.3s linear;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transition: background-color 0.3s linear;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 input,
@@ -67,20 +76,8 @@ a {
   -webkit-user-drag: none;
 }
 
-html,
-body,
-#root {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-}
-
-#root {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  flex: 1;
+ul {
+  list-style: none;
 }
 
 .loader {
diff --git a/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx
index 476c67e57e..74d16a80f0 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx
@@ -23,12 +23,6 @@ const ThinkingBlock: React.FC<Props> = ({ block }) => {
 
   const isThinking = useMemo(() => block.status === MessageBlockStatus.STREAMING, [block.status])
 
-  const fontFamily = useMemo(() => {
-    return messageFont === 'serif'
-      ? 'serif'
-      : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans","Helvetica Neue", sans-serif'
-  }, [messageFont])
-
   useEffect(() => {
     if (!isThinking && thoughtAutoCollapse) {
       setActiveKey('')
@@ -98,7 +92,11 @@ const ThinkingBlock: React.FC<Props> = ({ block }) => {
           ),
           children: (
             //  FIXME: 临时兼容
-            <div style={{ fontFamily, fontSize }}>
+            <div
+              style={{
+                fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
+                fontSize
+              }}>
               <Markdown block={block} />
             </div>
           )
diff --git a/src/renderer/src/pages/home/Messages/MessageTools.tsx b/src/renderer/src/pages/home/Messages/MessageTools.tsx
index b381fc171d..ee643697cf 100644
--- a/src/renderer/src/pages/home/Messages/MessageTools.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTools.tsx
@@ -17,11 +17,6 @@ const MessageTools: FC<Props> = ({ blocks }) => {
   const [expandedResponse, setExpandedResponse] = useState<{ content: string; title: string } | null>(null)
   const { t } = useTranslation()
   const { messageFont, fontSize } = useSettings()
-  const fontFamily = useMemo(() => {
-    return messageFont === 'serif'
-      ? 'serif'
-      : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans","Helvetica Neue", sans-serif'
-  }, [messageFont])
 
   const toolResponse = blocks.metadata?.rawMcpToolResponse
 
@@ -122,7 +117,11 @@ const MessageTools: FC<Props> = ({ blocks }) => {
         </MessageTitleLabel>
       ),
       children: isDone && result && (
-        <ToolResponseContainer style={{ fontFamily, fontSize: '12px' }}>
+        <ToolResponseContainer
+          style={{
+            fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
+            fontSize: '12px'
+          }}>
           <div className="markdown" dangerouslySetInnerHTML={{ __html: styledResult }} />
         </ToolResponseContainer>
       )
@@ -173,7 +172,11 @@ const MessageTools: FC<Props> = ({ blocks }) => {
         transitionName="animation-move-down"
         styles={{ body: { maxHeight: '80vh', overflow: 'auto' } }}>
         {expandedResponse && (
-          <ExpandedResponseContainer style={{ fontFamily, fontSize }}>
+          <ExpandedResponseContainer
+            style={{
+              fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
+              fontSize
+            }}>
             {/* mode swtich tabs */}
             <Tabs
               tabBarExtraContent={