refactor(chat): 重构字体大小设置功能，使用Cookie作为字体存储

web/src/pages/chat/chat-container/index.tsx

@@ -27,7 +27,7 @@ interface IProps {
   fontSize: number;
 }
 
-const ChatContainer = ({ controller, fontSize = 16 }: IProps) => {
+const ChatContainer = ({ controller, fontSize = 18 }: IProps) => {
   const { conversationId } = useGetChatSearchParams();
   const { data: conversation } = useFetchNextConversation();
 

web/src/pages/chat/index.tsx

@@ -1,5 +1,20 @@
 import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
+import EmbedModal from '@/components/api-service/embed-modal';
+import { useShowEmbedModal } from '@/components/api-service/hooks';
 import RenameModal from '@/components/rename-modal';
+import SvgIcon from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
+import { SharedFrom } from '@/constants/chat';
+import {
+  useClickConversationCard,
+  useClickDialogCard,
+  useFetchNextDialogList,
+  useGetChatSearchParams,
+} from '@/hooks/chat-hooks';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useSetSelectedRecord } from '@/hooks/logic-hooks';
+import { IDialog } from '@/interfaces/database/chat';
+import { FontStorageUtil } from '@/utils/font-storage';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -13,6 +28,8 @@ import {
   Dropdown,
   Flex,
   MenuProps,
+  Modal,
+  Slider,
   Space,
   Spin,
   Tag,
@@ -21,6 +38,7 @@ import {
 } from 'antd';
 import { MenuItemProps } from 'antd/lib/menu/MenuItem';
 import classNames from 'classnames';
+import { PictureInPicture2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import ChatConfigurationModal from './chat-configuration-modal';
 import ChatContainer from './chat-container';
@@ -32,23 +50,6 @@ import {
   useRenameConversation,
   useSelectDerivedConversationList,
 } from './hooks';
-
-import EmbedModal from '@/components/api-service/embed-modal';
-import { useShowEmbedModal } from '@/components/api-service/hooks';
-import SvgIcon from '@/components/svg-icon';
-import { useTheme } from '@/components/theme-provider';
-import { SharedFrom } from '@/constants/chat';
-import {
-  useClickConversationCard,
-  useClickDialogCard,
-  useFetchNextDialogList,
-  useGetChatSearchParams,
-} from '@/hooks/chat-hooks';
-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;
 
@@ -166,16 +167,20 @@ const Chat = () => {
   }, [addTemporaryConversation]);
 
   const [fontSizeModalVisible, setFontSizeModalVisible] = useState(false);
-  const [fontSize, setFontSize] = useState(16); // 默认字体大小
+  const [fontSize, setFontSize] = useState(18); // 默认字体大小
 
-  // 从localStorage加载字体大小设置
+  // 从存储加载字体大小设置
   useEffect(() => {
-    const savedFontSize = localStorage.getItem('chatFontSize');
+    const savedFontSize = FontStorageUtil.getFontSize();
-    if (savedFontSize) {
+    setFontSize(savedFontSize);
-      setFontSize(parseInt(savedFontSize));
-    }
   }, []);
 
+  // 字体大小变化处理
+  const handleFontSizeChange = (value: number) => {
+    setFontSize(value);
+    FontStorageUtil.setFontSize(value);
+  };
+
   const buildAppItems = (dialog: IDialog) => {
     const dialogId = dialog.id;
 
@@ -429,10 +434,7 @@ const Chat = () => {
               step={1}
               defaultValue={fontSize}
               style={{ width: '80%' }}
-              onChange={(value) => {
+              onChange={handleFontSizeChange}
-                setFontSize(value);
-                localStorage.setItem('chatFontSize', value.toString());
-              }}
             />
           </Flex>
         </Modal>

web/src/utils/font-storage.ts

@@ -0,0 +1,49 @@
+// 字体大小存储工具
+export const FontStorageUtil = {
+  // 获取字体大小
+  getFontSize: (): number => {
+    try {
+      // 优先从localStorage获取
+      const localStorageValue = localStorage.getItem('chatFontSize');
+      if (localStorageValue && !isNaN(parseInt(localStorageValue))) {
+        return parseInt(localStorageValue);
+      }
+    } catch (error) {
+      console.warn('localStorage不可用，尝试从cookie获取');
+    }
+
+    try {
+      // 从cookie获取
+      const cookieValue = document.cookie
+        .split('; ')
+        .find((row) => row.startsWith('chatFontSize='))
+        ?.split('=')[1];
+
+      if (cookieValue && !isNaN(parseInt(cookieValue))) {
+        return parseInt(cookieValue);
+      }
+    } catch (error) {
+      console.warn('cookie也不可用');
+    }
+
+    return 18; // 默认字体大小
+  },
+
+  // 保存字体大小
+  setFontSize: (size: number): void => {
+    try {
+      localStorage.setItem('chatFontSize', size.toString());
+    } catch (error) {
+      console.warn('localStorage保存失败，尝试使用cookie');
+    }
+
+    try {
+      // 设置cookie，有效期30天
+      const expires = new Date();
+      expires.setDate(expires.getDate() + 30);
+      document.cookie = `chatFontSize=${size}; expires=${expires.toUTCString()}; path=/`;
+    } catch (error) {
+      console.warn('cookie保存也失败');
+    }
+  },
+};