Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 405a75e2 by archer
Options

feat: colormode

parent be47169f
Showing with 39 additions and 12 deletions
src/pages/_app.tsx
import type { AppProps, NextWebVitalsMetric } from 'next/app'; import type { AppProps, NextWebVitalsMetric } from 'next/app';
import Script from 'next/script'; import Script from 'next/script';
import Head from 'next/head'; import Head from 'next/head';
import { ChakraProvider } from '@chakra-ui/react'; import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import { theme } from '@/constants/theme'; import { theme } from '@/constants/theme';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
...@@ -41,6 +41,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -41,6 +41,7 @@ export default function App({ Component, pageProps }: AppProps) {
<Script src="/iconfont.js" strategy="afterInteractive"></Script> <Script src="/iconfont.js" strategy="afterInteractive"></Script>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Layout> <Layout>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout> </Layout>
......
src/pages/chat/components/SlideBar.tsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { AddIcon, ChatIcon, DeleteIcon } from '@chakra-ui/icons'; import { AddIcon, ChatIcon, DeleteIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
import { import {
Box, Box,
Button, Button,
...@@ -18,7 +18,8 @@ import { ...@@ -18,7 +18,8 @@ import {
ModalFooter, ModalFooter,
ModalBody, ModalBody,
ModalCloseButton, ModalCloseButton,
useDisclosure useDisclosure,
useColorMode
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import { useChatStore } from '@/store/chat'; import { useChatStore } from '@/store/chat';
...@@ -45,6 +46,7 @@ const SlideBar = ({ ...@@ -45,6 +46,7 @@ const SlideBar = ({
onClose: () => void; onClose: () => void;
}) => { }) => {
const router = useRouter(); const router = useRouter();
const { colorMode, toggleColorMode } = useColorMode();
const { copyData } = useCopyData(); const { copyData } = useCopyData();
const { myModels, getMyModels } = useUserStore(); const { myModels, getMyModels } = useUserStore();
const { chatHistory, removeChatHistoryByWindowId } = useChatStore(); const { chatHistory, removeChatHistoryByWindowId } = useChatStore();
...@@ -217,15 +219,27 @@ const SlideBar = ({ ...@@ -217,15 +219,27 @@ const SlideBar = ({
</> </>
</RenderButton> </RenderButton>
<RenderButton <RenderButton onClick={onOpenShare}>
onClick={onOpenShare}
>
<> <>
<MyIcon name="share" fill={'white'} w={'16px'} h={'16px'} mr={4} /> <MyIcon name="share" fill={'white'} w={'16px'} h={'16px'} mr={4} />
分享 分享
</> </>
</RenderButton> </RenderButton>
<Box textAlign={'end'} mr={4}>
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
aria-label={''}
variant={'outline'}
w={'16px'}
colorScheme={'white'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.2)'
}}
onClick={toggleColorMode}
/>
</Box>
{/* 分享提示modal */} {/* 分享提示modal */}
<Modal isOpen={isOpenShare} onClose={onCloseShare}> <Modal isOpen={isOpenShare} onClose={onCloseShare}>
<ModalOverlay /> <ModalOverlay />
...@@ -250,7 +264,7 @@ const SlideBar = ({ ...@@ -250,7 +264,7 @@ const SlideBar = ({
'已复制分享链接' '已复制分享链接'
); );
onCloseShare(); onCloseShare();
onClose() onClose();
}} }}
> >
分享空白对话 分享空白对话
...@@ -261,7 +275,7 @@ const SlideBar = ({ ...@@ -261,7 +275,7 @@ const SlideBar = ({
onClick={() => { onClick={() => {
copyData(`${location.origin}/chat?chatId=${chatId}`, '已复制分享链接'); copyData(`${location.origin}/chat?chatId=${chatId}`, '已复制分享链接');
onCloseShare(); onCloseShare();
onClose() onClose();
}} }}
> >
分享当前对话 分享当前对话
......
src/pages/chat/index.tsx
...@@ -18,7 +18,8 @@ import { ...@@ -18,7 +18,8 @@ import {
useDisclosure, useDisclosure,
Drawer, Drawer,
DrawerOverlay, DrawerOverlay,
DrawerContent DrawerContent,
useColorModeValue
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import Icon from '@/components/Iconfont'; import Icon from '@/components/Iconfont';
...@@ -413,7 +414,12 @@ const Chat = ({ chatId }: { chatId: string }) => { ...@@ -413,7 +414,12 @@ const Chat = ({ chatId }: { chatId: string }) => {
key={index} key={index}
py={media(9, 6)} py={media(9, 6)}
px={media(4, 2)} px={media(4, 2)}
backgroundColor={index % 2 === 0 ? 'rgba(247,247,248,1)' : '#fff'} backgroundColor={
index % 2 === 0
? useColorModeValue('blackAlpha.50', '')
: useColorModeValue('white', 'gray.700')
}
color={useColorModeValue('blackAlpha.700', 'white')}
borderBottom={'1px solid rgba(0,0,0,0.1)'} borderBottom={'1px solid rgba(0,0,0,0.1)'}
> >
<Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}> <Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}>
...@@ -445,7 +451,7 @@ const Chat = ({ chatId }: { chatId: string }) => { ...@@ -445,7 +451,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
m={media('20px auto', '0 auto')} m={media('20px auto', '0 auto')}
w={'100%'} w={'100%'}
maxW={media('min(750px, 100%)', 'auto')} maxW={media('min(750px, 100%)', 'auto')}
boxShadow={'0 -14px 30px rgba(255,255,255,0.6)'} boxShadow={`0 -14px 30px ${useColorModeValue('rgba(255,255,255,0.5)', 'blackAlpha.200')}`}
borderTop={media('none', '1px solid rgba(0,0,0,0.1)')} borderTop={media('none', '1px solid rgba(0,0,0,0.1)')}
> >
{!!chatWindowError ? ( {!!chatWindowError ? (
...@@ -488,6 +494,7 @@ const Chat = ({ chatId }: { chatId: string }) => { ...@@ -488,6 +494,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
maxHeight={'150px'} maxHeight={'150px'}
maxLength={chatData?.secret.contentMaxLen || -1} maxLength={chatData?.secret.contentMaxLen || -1}
overflowY={'auto'} overflowY={'auto'}
color={useColorModeValue('blackAlpha.600', 'white')}
onChange={(e) => { onChange={(e) => {
const textarea = e.target; const textarea = e.target;
setInputVal(textarea.value); setInputVal(textarea.value);
...@@ -517,7 +524,12 @@ const Chat = ({ chatId }: { chatId: string }) => { ...@@ -517,7 +524,12 @@ const Chat = ({ chatId }: { chatId: string }) => {
/> />
) : ( ) : (
<Box cursor={'pointer'} onClick={sendPrompt}> <Box cursor={'pointer'} onClick={sendPrompt}>
<Icon name={'icon-fasong'} width={20} height={20} color={'#718096'}></Icon> <Icon
name={'icon-fasong'}
width={20}
height={20}
color={useColorModeValue('#718096', 'white')}
></Icon>
</Box> </Box>
)} )}
</Box> </Box>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment