From e38ce90026d719b64edd342db851151d4a32dd40 Mon Sep 17 00:00:00 2001 From: zstar <65890619+zstar1003@users.noreply.github.com> Date: Thu, 29 May 2025 16:54:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor(chat):=20=E9=87=8D=E6=9E=84=E5=AD=97?= =?UTF-8?q?=E4=BD=93=E5=A4=A7=E5=B0=8F=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8Cookie=E4=BD=9C=E4=B8=BA=E5=AD=97?= =?UTF-8?q?=E4=BD=93=E5=AD=98=E5=82=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/chat/chat-container/index.tsx | 2 +- web/src/pages/chat/index.tsx | 56 +++++++++++---------- web/src/utils/font-storage.ts | 49 ++++++++++++++++++ 3 files changed, 79 insertions(+), 28 deletions(-) create mode 100644 web/src/utils/font-storage.ts diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 4dc20ab..5bc005f 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/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(); diff --git a/web/src/pages/chat/index.tsx b/web/src/pages/chat/index.tsx index 8e2af93..ec5c96d 100644 --- a/web/src/pages/chat/index.tsx +++ b/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'); - if (savedFontSize) { - setFontSize(parseInt(savedFontSize)); - } + const savedFontSize = FontStorageUtil.getFontSize(); + setFontSize(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) => { - setFontSize(value); - localStorage.setItem('chatFontSize', value.toString()); - }} + onChange={handleFontSizeChange} /> diff --git a/web/src/utils/font-storage.ts b/web/src/utils/font-storage.ts new file mode 100644 index 0000000..e4a1db6 --- /dev/null +++ b/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保存也失败'); + } + }, +};