mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-09 04:08:10 +00:00
fix: css layout small change
This commit is contained in:
changhuiping.chp
parent
8418a7dd7f
commit
d587b85a57
@ -1,11 +1,50 @@
|
||||
"use client"
|
||||
import './globals.css'
|
||||
import '@/nprogress.css';
|
||||
import React from 'react';
|
||||
import LeftSider from '@/components/leftSider';
|
||||
import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles';
|
||||
import { useColorScheme } from '@/lib/mui';
|
||||
import { joyTheme } from '@/defaultTheme';
|
||||
import TopProgressBar from '@/components/topProgressBar';
|
||||
import DialogueContext from './context/dialogue';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
function CssWrapper({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const { mode } = useColorScheme();
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref?.current && mode) {
|
||||
ref?.current?.classList?.add(mode);
|
||||
if (mode === 'light') {
|
||||
ref?.current?.classList?.remove('dark');
|
||||
} else {
|
||||
ref?.current?.classList?.remove('light');
|
||||
}
|
||||
}
|
||||
}, [ref, mode]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className='h-full'>
|
||||
<TopProgressBar />
|
||||
<DialogueContext>
|
||||
<div className={`contents h-full`}>
|
||||
<div className="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300 md:grid-cols-[280px,1fr] md:grid-rows-[1fr]">
|
||||
<LeftSider />
|
||||
<div className='relative min-h-0 min-w-0'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogueContext>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RootLayout({
|
||||
children,
|
||||
@ -18,17 +57,9 @@ function RootLayout({
|
||||
<body className={`h-full font-sans`}>
|
||||
<ThemeProvider theme={joyTheme}>
|
||||
<CssVarsProvider theme={joyTheme} defaultMode="light">
|
||||
<TopProgressBar />
|
||||
<DialogueContext>
|
||||
<div className={`contents h-full`}>
|
||||
<div className="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300 md:grid-cols-[280px,1fr] md:grid-rows-[1fr]">
|
||||
<LeftSider />
|
||||
<div className='relative min-h-0 min-w-0'>
|
||||
<CssWrapper>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogueContext>
|
||||
</CssWrapper>
|
||||
</CssVarsProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import { useRequest } from 'ahooks';
|
||||
import { useState } from 'react';
|
||||
import { Button, Input, Box, buttonClasses } from '@/lib/mui';
|
||||
import { Button, Input, Box, buttonClasses, Divider, Typography } from '@/lib/mui';
|
||||
import IconButton from '@mui/joy/IconButton';
|
||||
import SendRoundedIcon from '@mui/icons-material/SendRounded';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
@ -38,12 +38,18 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='mx-auto justify-end flex max-w-3xl flex-col h-3/4 gap-6 px-5 pt-6 sm:gap-16 xl:max-w-4xl'>
|
||||
<div className='mx-auto h-full justify-center flex max-w-3xl flex-col gap-8 px-5 pt-6 xl:max-w-4xl'>
|
||||
<div className='max-w-xs my-0 mx-auto'>
|
||||
<Typography level="h3" className="text-center">DB-GPT</Typography>
|
||||
<Typography level="body1" className="text-center pt-4">
|
||||
Revolutionizing Database Interactions with Private LLM Technology
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='grid gap-8 lg:grid-cols-3'>
|
||||
<div className='lg:col-span-3'>
|
||||
<p className='mb-8 text-center text-2xl'>Scenes</p>
|
||||
<Divider className="text-[#878c93]">Quick Start</Divider>
|
||||
<Box
|
||||
className='grid gap-2 lg:grid-cols-3 lg:gap-6'
|
||||
className='grid pt-7 rounded-xl gap-2 lg:grid-cols-3 lg:gap-6'
|
||||
sx={{
|
||||
[`& .${buttonClasses.root}`]: {
|
||||
color: 'var(--joy-palette-primary-solidColor)',
|
||||
@ -60,10 +66,7 @@ export default function Home() {
|
||||
key={scene['chat_scene']}
|
||||
size="md"
|
||||
variant="solid"
|
||||
className='text-base rounded-none '
|
||||
style={{
|
||||
boxShadow: '0px 8px 10px 0px rgb(31 31 31 / 50%)'
|
||||
}}
|
||||
className='text-base rounded-none'
|
||||
onClick={async () => {
|
||||
const res = await sendPostRequest('/v1/chat/dialogue/new', {
|
||||
chat_mode: scene['chat_scene']
|
||||
@ -79,7 +82,7 @@ export default function Home() {
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 pointer-events-none inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center max-md:border-t xl:max-w-4xl [&>*]:pointer-events-auto'>
|
||||
<div className='mt-6 mb-[10%] pointer-events-none inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center max-md:border-t xl:max-w-4xl [&>*]:pointer-events-auto'>
|
||||
<form
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
@ -92,6 +95,7 @@ export default function Home() {
|
||||
justifyContent: 'center',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
height: '52px'
|
||||
}}
|
||||
onSubmit={(e) => {
|
||||
methods.handleSubmit(submit)(e);
|
||||
|
||||
@ -29,7 +29,6 @@ const ChatBoxComp = ({
|
||||
paramsList,
|
||||
clearIntialMessage
|
||||
}: Props) => {
|
||||
const { mode } = useColorScheme();
|
||||
const searchParams = useSearchParams();
|
||||
const initMessage = searchParams.get('initMessage');
|
||||
const scrollableRef = React.useRef<HTMLDivElement>(null);
|
||||
@ -77,6 +76,7 @@ const ChatBoxComp = ({
|
||||
</SyntaxHighlighter>
|
||||
),
|
||||
},
|
||||
wrapper: React.Fragment,
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -102,19 +102,18 @@ const ChatBoxComp = ({
|
||||
return (
|
||||
<div className='w-full h-full'>
|
||||
<Stack
|
||||
className="w-full h-full"
|
||||
className="w-full h-full bg-[#fefefe] dark:bg-[#212121]"
|
||||
sx={{
|
||||
background: mode === 'light' ? '#fefefe' : '#212121',
|
||||
'table': {
|
||||
borderCollapse: 'collapse',
|
||||
border: '1px solid #ccc',
|
||||
width: '100%',
|
||||
},
|
||||
'th, td': {
|
||||
border: '1px solid #ccc',
|
||||
padding: '10px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
@ -151,7 +150,7 @@ const ChatBoxComp = ({
|
||||
<FaceRetouchingNaturalOutlinedIcon />
|
||||
)}
|
||||
</div>
|
||||
<div className='inline align-middle mt-0.5'>
|
||||
<div className='inline align-middle mt-0.5 max-w-full flex-1 overflow-auto'>
|
||||
<Markdown options={options}>
|
||||
{each.context?.replaceAll('\\n', '\n')}
|
||||
</Markdown>
|
||||
@ -172,9 +171,9 @@ const ChatBoxComp = ({
|
||||
</Stack>
|
||||
{!readOnly && (
|
||||
<Box
|
||||
className="bg-[#fefefe] dark:bg-[#212121] before:bg-[#fefefe] before:dark:bg-[#212121]"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
background: mode === 'light' ? '#fefefe' : '#212121',
|
||||
'&::before': {
|
||||
content: '" "',
|
||||
position: 'absolute',
|
||||
@ -184,7 +183,6 @@ const ChatBoxComp = ({
|
||||
width: '100%',
|
||||
margin: '0 auto',
|
||||
height: '20px',
|
||||
background: mode === 'light' ? '#fefefe' : '#212121',
|
||||
filter: 'blur(10px)',
|
||||
zIndex: 2,
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ import { sendPostRequest } from '@/utils/request';
|
||||
const LeftSider = () => {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const id = searchParams.get('id');
|
||||
const router = useRouter();
|
||||
const { dialogueList, queryDialogueList, refreshDialogList } = useDialogueContext();
|
||||
const { mode, setMode } = useColorScheme();
|
||||
@ -90,7 +91,12 @@ const LeftSider = () => {
|
||||
}}
|
||||
>
|
||||
<Link href={`/`}>
|
||||
<Button variant="outlined" color="primary" className='w-full'>+ New Chat</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
className='w-full text-[#fff] bg-gradient-to-r from-[#31afff] to-[#1677ff] dark:bg-gradient-to-r dark:from-[#6a6a6a] dark:to-[#80868f]'
|
||||
>
|
||||
+ New Chat
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box
|
||||
@ -115,7 +121,7 @@ const LeftSider = () => {
|
||||
}}
|
||||
>
|
||||
{dialogueList?.data?.map((each) => {
|
||||
const isSelect = pathname === `/chat` && searchParams.get('id') === each.conv_uid;
|
||||
const isSelect = (pathname === `/chat` || pathname === '/chat/') && id === each.conv_uid;
|
||||
return (
|
||||
<ListItem key={each.conv_uid}>
|
||||
<ListItemButton
|
||||
|
||||
@ -8,10 +8,9 @@ export const joyTheme = extendTheme({
|
||||
mode: 'dark',
|
||||
primary: {
|
||||
...colors.grey,
|
||||
solidBg: '#9a9a9a91',
|
||||
solidColor: '#4e4e4e',
|
||||
solidHoverBg: '#d5d5d5',
|
||||
outlinedColor: '#4e4e59'
|
||||
solidBg: '#e6f4ff',
|
||||
solidColor: '#1677ff',
|
||||
solidHoverBg: '#e6f4ff',
|
||||
},
|
||||
neutral: {
|
||||
plainColor: '#4d4d4d',
|
||||
@ -37,8 +36,8 @@ export const joyTheme = extendTheme({
|
||||
softBg: '#353539',
|
||||
softHoverBg: '#35353978',
|
||||
softDisabledBg: '#353539',
|
||||
solidBg: '#434356',
|
||||
solidHoverBg: '#5a5a72',
|
||||
solidBg: '#51525beb',
|
||||
solidHoverBg: '#51525beb',
|
||||
},
|
||||
neutral: {
|
||||
plainColor: '#D8D8DF',
|
||||
@ -54,7 +53,7 @@ export const joyTheme = extendTheme({
|
||||
},
|
||||
background: {
|
||||
body: '#212121',
|
||||
surface: '#525262',
|
||||
surface: '#51525beb',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user