feat(聊天界面): 新增字体大小调整功能

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;
     }
 

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) => {

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')}>
+            {/* <Tooltip title={t('newChat')}> */}
-              <div>
+            <div>
-                <SvgIcon
+              <SettingOutlined
-                  name="plus-circle-fill"
+                style={{
-                  width={20}
+                  marginRight: '8px',
-                  onClick={handleCreateTemporaryConversation}
+                  fontSize: '20px',
-                ></SvgIcon>
+                  cursor: 'pointer',
-              </div>
+                }}
-            </Tooltip>
+                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>
   );
 };