feat: 聊天页暗夜模式

src/pages/chat/components/SlideBar.tsx

@@ -19,7 +19,8 @@ import {
   ModalBody,
   ModalCloseButton,
   useDisclosure,
-  useColorMode
+  useColorMode,
+  useColorModeValue
 } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
 import { useChatStore } from '@/store/chat';
@@ -100,6 +101,9 @@ const SlideBar = ({
               size={'xs'}
               onClick={(e) => {
                 removeChatHistoryByWindowId(item.chatId);
+                if (item.chatId === chatId) {
+                  resetChat();
+                }
                 e.stopPropagation();
               }}
             />
@@ -132,7 +136,7 @@ const SlideBar = ({
       w={'100%'}
       h={'100%'}
       py={3}
-      backgroundColor={'rgba(32,33,35,1)'}
+      backgroundColor={useColorModeValue('blackAlpha.800', 'blackAlpha.500')}
       color={'white'}
     >
       {/* 新对话 */}
@@ -152,7 +156,7 @@ const SlideBar = ({
 
       {/* 我的模型 & 历史记录 折叠框*/}
       <Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
-        <Accordion defaultIndex={[0]} allowToggle>
+        <Accordion defaultIndex={[0]} allowToggle allowMultiple>
           {isSuccess && (
             <AccordionItem borderTop={0} borderBottom={0}>
               <AccordionButton borderRadius={'md'} pl={1}>
@@ -210,7 +214,7 @@ const SlideBar = ({
         </Accordion>
       </Box>
 
-      <Divider my={4} />
+      <Divider my={4} colorScheme={useColorModeValue('gray', 'white')} />
 
       <RenderButton onClick={() => router.push('/')}>
         <>
@@ -243,7 +247,7 @@ const SlideBar = ({
       {/* 分享提示modal */}
       <Modal isOpen={isOpenShare} onClose={onCloseShare}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent color={useColorModeValue('blackAlpha.700', 'white')}>
           <ModalHeader>分享对话</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
@@ -252,7 +256,7 @@ const SlideBar = ({
 
           <ModalFooter>
             <Button colorScheme="gray" variant={'outline'} mr={3} onClick={onCloseShare}>
-              Close
+              取消
             </Button>
             {getToken() && (
               <Button

src/pages/chat/index.tsx

@@ -33,6 +33,7 @@ import { streamFetch } from '@/api/fetch';
 import SlideBar from './components/SlideBar';
 import Empty from './components/Empty';
 import { getToken } from '@/utils/user';
+import MyIcon from '@/components/Icon';
 
 const Markdown = dynamic(() => import('@/components/Markdown'));
 
@@ -364,7 +365,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
     <Flex
       h={'100%'}
       flexDirection={media('row', 'column')}
-      backgroundColor={useColorModeValue('blackAlpha.50', 'rgba(52,53,65)')}
+      backgroundColor={useColorModeValue('white', '')}
     >
       {isPc ? (
         <Box flex={'0 0 250px'} w={0} h={'100%'}>
@@ -382,12 +383,18 @@ const Chat = ({ chatId }: { chatId: string }) => {
             alignItems={'center'}
             h={'100%'}
             justifyContent={'space-between'}
-            backgroundColor={'white'}
+            backgroundColor={useColorModeValue('white', 'gray.700')}
+            color={useColorModeValue('blackAlpha.700', 'white')}
             position={'relative'}
             px={7}
           >
             <Box onClick={onOpenSlider}>
-              <Icon name="icon-caidan" width={20} height={20}></Icon>
+              <MyIcon
+                name={'menu'}
+                w={'20px'}
+                h={'20px'}
+                fill={useColorModeValue('blackAlpha.700', 'white')}
+              />
             </Box>
             <Box>{chatData?.name}</Box>
           </Flex>
@@ -418,7 +425,9 @@ const Chat = ({ chatId }: { chatId: string }) => {
               key={index}
               py={media(9, 6)}
               px={media(4, 2)}
-              backgroundColor={index % 2 === 0 ? useColorModeValue('white', 'rgba(68,70,84)') : ''}
+              backgroundColor={
+                index % 2 !== 0 ? useColorModeValue('blackAlpha.50', 'gray.700') : ''
+              }
               color={useColorModeValue('blackAlpha.700', 'white')}
               borderBottom={'1px solid rgba(0,0,0,0.1)'}
             >
@@ -447,13 +456,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
           {chatData.history.length === 0 && <Empty intro={chatData.intro} />}
         </Box>
         {/* 发送区 */}
-        <Box
-          m={media('20px auto', '0 auto')}
-          w={'100%'}
-          maxW={media('min(750px, 100%)', 'auto')}
-          boxShadow={`0 -14px 30px ${useColorModeValue('rgba(255,255,255,0.5)', 'blackAlpha.200')}`}
-          borderTop={media('none', '1px solid rgba(0,0,0,0.1)')}
-        >
+        <Box m={media('20px auto', '0 auto')} w={'100%'} maxW={media('min(750px, 100%)', 'auto')}>
           {!!chatWindowError ? (
             <Box textAlign={'center'}>
               <Box color={'red'}>{chatWindowError.text}</Box>
@@ -471,9 +474,11 @@ const Chat = ({ chatId }: { chatId: string }) => {
             <Box
               py={5}
               position={'relative'}
-              boxShadow={'base'}
-              overflow={'hidden'}
-              borderRadius={media('md', 'none')}
+              boxShadow={`0 0 15px rgba(0,0,0,0.1)`}
+              border={media('1px solid', '0')}
+              borderColor={useColorModeValue('gray.200', 'gray.700')}
+              borderRadius={['none', 'md']}
+              backgroundColor={useColorModeValue('white', 'gray.700')}
             >
               {/* 输入框 */}
               <Textarea