From a2d9490b59104fee675d689357e75d6c682460d6 Mon Sep 17 00:00:00 2001
From: zstar <65890619+zstar1003@users.noreply.github.com>
Date: Sat, 17 May 2025 14:29:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=81=8A=E5=A4=A9=E7=95=8C=E9=9D=A2):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/chat/chat-container/index.less |  5 --
 web/src/pages/chat/chat-container/index.tsx  | 10 ++-
 web/src/pages/chat/index.tsx                 | 76 ++++++++++++++++----
 3 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less
index 8bd4051..6cb0b53 100644
--- a/web/src/pages/chat/chat-container/index.less
+++ b/web/src/pages/chat/chat-container/index.less
@@ -17,13 +17,11 @@
       line-height: 1.2;
       border-bottom: 2px solid #eaeaea;
       padding-bottom: 0.25em;
-      font-size: 24px;
       margin: 0.25em 0.25em;
     }
     section {
       margin-top: 1em;
       margin-bottom: 1em;
-      font-size: 20px;
       p {
         margin-left: 0;
       }
@@ -32,7 +30,6 @@
       margin-top: 1em;
       margin-bottom: 1em;
       margin-left: 1em;
-      font-size: 20px;
     }
     ul,
     ol {
@@ -40,7 +37,6 @@
       padding-left: 1.8em;
       li {
         margin-bottom: 0.25em;
-        font-size: 20px;
       }
     }
     table {
@@ -60,7 +56,6 @@
       border: none;
       padding: 12px;
       text-align: left;
-      font-size: 20px;
       border-bottom: 1px solid #ddd;
     }
 
diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx
index 29b94a9..4dc20ab 100644
--- a/web/src/pages/chat/chat-container/index.tsx
+++ b/web/src/pages/chat/chat-container/index.tsx
@@ -24,9 +24,10 @@ import styles from './index.less';
 
 interface IProps {
   controller: AbortController;
+  fontSize: number;
 }
 
-const ChatContainer = ({ controller }: IProps) => {
+const ChatContainer = ({ controller, fontSize = 16 }: IProps) => {
   const { conversationId } = useGetChatSearchParams();
   const { data: conversation } = useFetchNextConversation();
 
@@ -55,7 +56,12 @@ const ChatContainer = ({ controller }: IProps) => {
   return (
     <>
       <Flex flex={1} className={styles.chatContainer} vertical>
-        <Flex flex={1} vertical className={styles.messageContainer}>
+        <Flex
+          flex={1}
+          vertical
+          className={styles.messageContainer}
+          style={{ fontSize: `${fontSize}px` }}
+        >
           <div>
             <Spin spinning={loading}>
               {derivedMessages?.map((message, i) => {
diff --git a/web/src/pages/chat/index.tsx b/web/src/pages/chat/index.tsx
index 9c7d67e..a81dc35 100644
--- a/web/src/pages/chat/index.tsx
+++ b/web/src/pages/chat/index.tsx
@@ -1,6 +1,10 @@
 import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
 import RenameModal from '@/components/rename-modal';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import {
   Avatar,
   Button,
@@ -12,12 +16,12 @@ import {
   Space,
   Spin,
   Tag,
-  Tooltip,
+  // Tooltip,
   Typography,
 } from 'antd';
 import { MenuItemProps } from 'antd/lib/menu/MenuItem';
 import classNames from 'classnames';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import ChatConfigurationModal from './chat-configuration-modal';
 import ChatContainer from './chat-container';
 import {
@@ -43,9 +47,9 @@ import {
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { IDialog } from '@/interfaces/database/chat';
+import { Modal, Slider } from 'antd';
 import { PictureInPicture2 } from 'lucide-react';
 import styles from './index.less';
-
 const { Text } = Typography;
 
 const Chat = () => {
@@ -161,6 +165,17 @@ const Chat = () => {
     addTemporaryConversation();
   }, [addTemporaryConversation]);
 
+  const [fontSizeModalVisible, setFontSizeModalVisible] = useState(false);
+  const [fontSize, setFontSize] = useState(16); // 默认字体大小
+
+  // 从localStorage加载字体大小设置
+  useEffect(() => {
+    const savedFontSize = localStorage.getItem('chatFontSize');
+    if (savedFontSize) {
+      setFontSize(parseInt(savedFontSize));
+    }
+  }, []);
+
   const buildAppItems = (dialog: IDialog) => {
     const dialogId = dialog.id;
 
@@ -286,6 +301,7 @@ const Chat = () => {
         </Flex>
       </Flex>
       <Divider type={'vertical'} className={styles.divider}></Divider>
+
       <Flex className={styles.chatTitleWrapper}>
         <Flex flex={1} vertical>
           <Flex
@@ -297,15 +313,23 @@ const Chat = () => {
               <b>{t('chat')}</b>
               <Tag>{conversationList.length}</Tag>
             </Space>
-            <Tooltip title={t('newChat')}>
-              <div>
-                <SvgIcon
-                  name="plus-circle-fill"
-                  width={20}
-                  onClick={handleCreateTemporaryConversation}
-                ></SvgIcon>
-              </div>
-            </Tooltip>
+            {/* <Tooltip title={t('newChat')}> */}
+            <div>
+              <SettingOutlined
+                style={{
+                  marginRight: '8px',
+                  fontSize: '20px',
+                  cursor: 'pointer',
+                }}
+                onClick={() => setFontSizeModalVisible(true)}
+              />
+              <SvgIcon
+                name="plus-circle-fill"
+                width={20}
+                onClick={handleCreateTemporaryConversation}
+              ></SvgIcon>
+            </div>
+            {/* </Tooltip> */}
           </Flex>
           <Divider></Divider>
           <Flex vertical gap={10} className={styles.chatTitleContent}>
@@ -356,7 +380,10 @@ const Chat = () => {
         </Flex>
       </Flex>
       <Divider type={'vertical'} className={styles.divider}></Divider>
-      <ChatContainer controller={controller}></ChatContainer>
+      <ChatContainer
+        controller={controller}
+        fontSize={fontSize}
+      ></ChatContainer>
       {dialogEditVisible && (
         <ChatConfigurationModal
           visible={dialogEditVisible}
@@ -386,6 +413,27 @@ const Chat = () => {
           isAgent={false}
         ></EmbedModal>
       )}
+
+      {fontSizeModalVisible && (
+        <Modal
+          title={'设置字体大小'}
+          open={fontSizeModalVisible}
+          onCancel={() => setFontSizeModalVisible(false)}
+          footer={null}
+        >
+          <Flex vertical gap="middle" align="center">
+            {'当前字体大小'}: {fontSize}px
+            <Slider
+              min={12}
+              max={24}
+              step={1}
+              defaultValue={fontSize}
+              style={{ width: '80%' }}
+              onChange={(value) => setFontSize(value)}
+            />
+          </Flex>
+        </Modal>
+      )}
     </Flex>
   );
 };