github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-09 04:08:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: css layout small change

Browse Source
This commit is contained in:
changhuiping.chp 2023-07-04 17:25:17 +08:00
parent 8418a7dd7f
commit d587b85a57
5 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
datacenter/app/layout.tsx
View File

@ -1,11 +1,50 @@
"use client" "use client"
import './globals.css' import './globals.css'
import '@/nprogress.css'; import '@/nprogress.css';
import React from 'react';
import LeftSider from '@/components/leftSider'; import LeftSider from '@/components/leftSider';
import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles'; import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles';
import { useColorScheme } from '@/lib/mui';
import { joyTheme } from '@/defaultTheme'; import { joyTheme } from '@/defaultTheme';
import TopProgressBar from '@/components/topProgressBar'; import TopProgressBar from '@/components/topProgressBar';
import DialogueContext from './context/dialogue'; 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({ function RootLayout({
children, children,
@ -18,17 +57,9 @@ function RootLayout({
<body className={`h-full font-sans`}> <body className={`h-full font-sans`}>
<ThemeProvider theme={joyTheme}> <ThemeProvider theme={joyTheme}>
<CssVarsProvider theme={joyTheme} defaultMode="light"> <CssVarsProvider theme={joyTheme} defaultMode="light">
<TopProgressBar /> <CssWrapper>
<DialogueContext> {children}
<div className={`contents h-full`}> </CssWrapper>
<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>
</CssVarsProvider> </CssVarsProvider>
</ThemeProvider> </ThemeProvider>
</body> </body>

22
datacenter/app/page.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
import { useState } from 'react'; 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 IconButton from '@mui/joy/IconButton';
import SendRoundedIcon from '@mui/icons-material/SendRounded'; import SendRoundedIcon from '@mui/icons-material/SendRounded';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
@ -38,12 +38,18 @@ export default function Home() {
return ( 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='grid gap-8 lg:grid-cols-3'>
<div className='lg:col-span-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 <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={{ sx={{
[`& .${buttonClasses.root}`]: { [`& .${buttonClasses.root}`]: {
color: 'var(--joy-palette-primary-solidColor)', color: 'var(--joy-palette-primary-solidColor)',
@ -60,10 +66,7 @@ export default function Home() {
key={scene['chat_scene']} key={scene['chat_scene']}
size="md" size="md"
variant="solid" variant="solid"
className='text-base rounded-none ' className='text-base rounded-none'
style={{
boxShadow: '0px 8px 10px 0px rgb(31 31 31 / 50%)'
}}
onClick={async () => { onClick={async () => {
const res = await sendPostRequest('/v1/chat/dialogue/new', { const res = await sendPostRequest('/v1/chat/dialogue/new', {
chat_mode: scene['chat_scene'] chat_mode: scene['chat_scene']
@ -79,7 +82,7 @@ export default function Home() {
</Box> </Box>
</div> </div>
</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 <form
style={{ style={{
maxWidth: '100%', maxWidth: '100%',
@ -92,6 +95,7 @@ export default function Home() {
justifyContent: 'center', justifyContent: 'center',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
height: '52px'
}} }}
onSubmit={(e) => { onSubmit={(e) => {
methods.handleSubmit(submit)(e); methods.handleSubmit(submit)(e);

12
datacenter/components/chatBoxTemp.tsx
View File

@ -29,7 +29,6 @@ const ChatBoxComp = ({
paramsList, paramsList,
clearIntialMessage clearIntialMessage
}: Props) => { }: Props) => {
const { mode } = useColorScheme();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const initMessage = searchParams.get('initMessage'); const initMessage = searchParams.get('initMessage');
const scrollableRef = React.useRef<HTMLDivElement>(null); const scrollableRef = React.useRef<HTMLDivElement>(null);
@ -77,6 +76,7 @@ const ChatBoxComp = ({
</SyntaxHighlighter> </SyntaxHighlighter>
), ),
}, },
wrapper: React.Fragment,
}; };
React.useEffect(() => { React.useEffect(() => {
@ -102,19 +102,18 @@ const ChatBoxComp = ({
return ( return (
<div className='w-full h-full'> <div className='w-full h-full'>
<Stack <Stack
className="w-full h-full" className="w-full h-full bg-[#fefefe] dark:bg-[#212121]"
sx={{ sx={{
background: mode === 'light' ? '#fefefe' : '#212121',
'table': { 'table': {
borderCollapse: 'collapse', borderCollapse: 'collapse',
border: '1px solid #ccc', border: '1px solid #ccc',
width: '100%',
}, },
'th, td': { 'th, td': {
border: '1px solid #ccc', border: '1px solid #ccc',
padding: '10px', padding: '10px',
textAlign: 'center' textAlign: 'center'
}, },
}} }}
> >
<Stack <Stack
@ -151,7 +150,7 @@ const ChatBoxComp = ({
<FaceRetouchingNaturalOutlinedIcon /> <FaceRetouchingNaturalOutlinedIcon />
)} )}
</div> </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}> <Markdown options={options}>
{each.context?.replaceAll('\\n', '\n')} {each.context?.replaceAll('\\n', '\n')}
</Markdown> </Markdown>
@ -172,9 +171,9 @@ const ChatBoxComp = ({
</Stack> </Stack>
{!readOnly && ( {!readOnly && (
<Box <Box
className="bg-[#fefefe] dark:bg-[#212121] before:bg-[#fefefe] before:dark:bg-[#212121]"
sx={{ sx={{
position: 'relative', position: 'relative',
background: mode === 'light' ? '#fefefe' : '#212121',
'&::before': { '&::before': {
content: '" "', content: '" "',
position: 'absolute', position: 'absolute',
@ -184,7 +183,6 @@ const ChatBoxComp = ({
width: '100%', width: '100%',
margin: '0 auto', margin: '0 auto',
height: '20px', height: '20px',
background: mode === 'light' ? '#fefefe' : '#212121',
filter: 'blur(10px)', filter: 'blur(10px)',
zIndex: 2, zIndex: 2,
} }

10
datacenter/components/leftSider.tsx
View File

@ -16,6 +16,7 @@ import { sendPostRequest } from '@/utils/request';
const LeftSider = () => { const LeftSider = () => {
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const id = searchParams.get('id');
const router = useRouter(); const router = useRouter();
const { dialogueList, queryDialogueList, refreshDialogList } = useDialogueContext(); const { dialogueList, queryDialogueList, refreshDialogList } = useDialogueContext();
const { mode, setMode } = useColorScheme(); const { mode, setMode } = useColorScheme();
@ -90,7 +91,12 @@ const LeftSider = () => {
}} }}
> >
<Link href={`/`}> <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> </Link>
</Box> </Box>
<Box <Box
@ -115,7 +121,7 @@ const LeftSider = () => {
}} }}
> >
{dialogueList?.data?.map((each) => { {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 ( return (
<ListItem key={each.conv_uid}> <ListItem key={each.conv_uid}>
<ListItemButton <ListItemButton

13
datacenter/defaultTheme.ts
View File

@ -8,10 +8,9 @@ export const joyTheme = extendTheme({
mode: 'dark', mode: 'dark',
primary: { primary: {
...colors.grey, ...colors.grey,
solidBg: '#9a9a9a91', solidBg: '#e6f4ff',
solidColor: '#4e4e4e', solidColor: '#1677ff',
solidHoverBg: '#d5d5d5', solidHoverBg: '#e6f4ff',
outlinedColor: '#4e4e59'
}, },
neutral: { neutral: {
plainColor: '#4d4d4d', plainColor: '#4d4d4d',
@ -37,8 +36,8 @@ export const joyTheme = extendTheme({
softBg: '#353539', softBg: '#353539',
softHoverBg: '#35353978', softHoverBg: '#35353978',
softDisabledBg: '#353539', softDisabledBg: '#353539',
solidBg: '#434356', solidBg: '#51525beb',
solidHoverBg: '#5a5a72', solidHoverBg: '#51525beb',
}, },
neutral: { neutral: {
plainColor: '#D8D8DF', plainColor: '#D8D8DF',
@ -54,7 +53,7 @@ export const joyTheme = extendTheme({
}, },
background: { background: {
body: '#212121', body: '#212121',
surface: '#525262', surface: '#51525beb',
} }
}, },
}, },