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

fix: 布局初步定型

Browse Source
This commit is contained in:
changhuiping.chp 2023-06-25 14:36:12 +08:00
parent 5db89e623c
commit 8a36f784b7
12 changed files with 1663 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
datacenter/app/agents/layout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Box } from '@/lib/mui';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<Box sx={{ color: 'red' }}>
123
{children}
</Box>
)
}

8
datacenter/app/agents/page.tsx Normal file
View File

@ -0,0 +1,8 @@
export default function Home() {
return (
<div>
HHH
</div>
)
}

61
datacenter/app/defaultTheme.ts Normal file
View File

@ -0,0 +1,61 @@
import { extendTheme } from '@mui/joy/styles';
import colors from '@mui/joy/colors';
export const joyTheme = extendTheme({
colorSchemes: {
light: {
palette: {
mode: 'dark',
primary: {
...colors.purple,
},
neutral: {
plainColor: '#25252D',
plainHoverColor: '#131318',
plainHoverBg: '#EBEBEF',
plainActiveBg: '#D8D8DF',
plainDisabledColor: '#B9B9C6'
},
background: {
body: '#fff'
},
text: {
primary: '#25252D'
},
},
},
dark: {
palette: {
mode: 'light',
primary: {
...colors.purple,
},
neutral: {
plainColor: '#D8D8DF',
plainHoverColor: '#F7F7F8',
plainHoverBg: '#25252D',
plainActiveBg: '#434356',
plainDisabledColor: '#434356'
},
text: {
primary: '#EBEBEF'
},
background: {
body: '#09090D'
}
},
},
},
fontFamily: {
body: 'Josefin Sans, sans-serif',
display: 'Josefin Sans, sans-serif',
},
typography: {
display1: {
background:
'linear-gradient(-30deg, var(--joy-palette-primary-900), var(--joy-palette-primary-400))',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
},
},
});

9
datacenter/app/globals.css
View File

@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
color: var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #25252D));
font-family: var(--joy-fontFamily-body, var(--joy-Josefin Sans, sans-serif));
font-size: var(--joy-fontSize-md, 1rem);
line-height: var(--joy-lineHeight-md, 1.5);
background-color: var(--joy-palette-background-body);
}

29
datacenter/app/layout.tsx
View File

@ -1,12 +1,9 @@
"use client"
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
import Header from '@/components/header';
import LeftSider from '@/components/leftSider';
import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles';
import { joyTheme } from './defaultTheme';
export default function RootLayout({
children,
@ -14,8 +11,20 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<html lang="en" className="min-h-full font-sans">
<body className={`min-h-screen font-sans`}>
<ThemeProvider theme={joyTheme}>
<CssVarsProvider theme={joyTheme} defaultMode="light">
<div className='min-h-screen flex flex-col'>
<Header />
<div className="flex flex-1 flex-row">
<LeftSider />
<div className='flex-1'>{children}</div>
</div>
</div>
</CssVarsProvider>
</ThemeProvider>
</body>
</html>
)
}

32
datacenter/components/colorSchemeToggle.tsx Normal file
View File

@ -0,0 +1,32 @@
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
import { IconButton,useColorScheme } from '@/lib/mui';
import React from 'react';
export default function ColorSchemeToggle() {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return <IconButton size="sm" variant="outlined" color="primary" />;
}
return (
<IconButton
id="toggle-mode"
size="sm"
variant="outlined"
color="primary"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
</IconButton>
);
}

42
datacenter/components/header.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Box, Typography } from '@/lib/mui';
import Image from 'next/image';
import ColorSchemeToggle from './colorSchemeToggle';
const Header = () => {
return (
<Box
sx={{
p: 2,
gap: 2,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
gridColumn: '1 / -1',
borderBottom: '1px solid',
borderColor: 'divider',
position: 'sticky',
top: 0,
zIndex: 1100,
}}
>
<div className='flex items-center justify-center gap-3'>
<Image
src="/databerry-logo-icon.png"
width="200"
height="200"
className='w-12'
alt="Databerry"
/>
<Typography component="h1" fontWeight="xl">
DB-GPT
</Typography>
</div>
<div>
<ColorSchemeToggle />
</div>
</Box>
)
};
export default Header;

76
datacenter/components/leftSider.tsx Normal file
View File

@ -0,0 +1,76 @@
"use client";
import React, { useMemo } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent } from '@/lib/mui';
import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import
import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
const LeftSider = () => {
const pathname = usePathname();
console.log(pathname, 'router')
const menus = useMemo(() => {
return [{
label: 'Agents',
icon: <SmartToyRoundedIcon fontSize="small" />,
route: '/agents',
active: pathname === '/agents',
}, {
label: 'Datastores',
route: '/',
icon: <StorageRoundedIcon fontSize="small" />,
active: pathname === '/'
}];
}, [pathname]);
return (
<Box
sx={[
{
p: 2,
borderRight: '1px solid',
borderColor: 'divider',
display: {
xs: 'none',
sm: 'initial',
},
},
]}
>
<List size="sm" sx={{ '--ListItem-radius': '8px' }}>
<ListItem nested>
<List
size="sm"
aria-labelledby="nav-list-browse"
sx={{
'& .JoyListItemButton-root': { p: '8px' },
}}
>
{menus.map((each) => (
<Link key={each.route} href={each.route}>
<ListItem>
<ListItemButton
selected={each.active}
variant={each.active ? 'soft' : 'plain'}
>
<ListItemDecorator
sx={{
color: each.active ? 'inherit' : 'neutral.500',
'--ListItemDecorator-size': '26px'
}}
>
{each.icon}
</ListItemDecorator>
<ListItemContent>{each.label}</ListItemContent>
</ListItemButton>
</ListItem>
</Link>
))}
</List>
</ListItem>
</List>
</Box>
)
};
export default LeftSider;

1388
datacenter/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
datacenter/package.json
View File

@ -9,6 +9,14 @@
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.10.5",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.16",
"@mui/joy": "5.0.0-alpha.72",
"@mui/lab": "5.0.0-alpha.124",
"@mui/material": "^5.11.14",
"@mui/utils": "^5.11.13",
"@types/node": "20.3.1",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
@ -19,6 +27,7 @@
"postcss": "8.4.24",
"react": "18.2.0",
"react-dom": "18.2.0",
"swr": "^2.1.1",
"tailwindcss": "3.3.2",
"typescript": "5.1.3"
}

BIN
datacenter/public/databerry-logo-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

10
datacenter/tailwind.config.js
View File

@ -1,3 +1,5 @@
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
@ -7,11 +9,9 @@ module.exports = {
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
fontFamily: {
sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
}
},
},
plugins: [],