mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-18 16:27:31 +00:00
fix: 布局初步定型
This commit is contained in:
changhuiping.chp
parent
5db89e623c
commit
8a36f784b7
14
datacenter/app/agents/layout.tsx
Normal file
14
datacenter/app/agents/layout.tsx
Normal 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
8
datacenter/app/agents/page.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
HHH
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
61
datacenter/app/defaultTheme.ts
Normal file
61
datacenter/app/defaultTheme.ts
Normal 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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -1,3 +1,12 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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);
|
||||||
|
}
|
||||||
@ -1,12 +1,9 @@
|
|||||||
|
"use client"
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
import { Inter } from 'next/font/google'
|
import Header from '@/components/header';
|
||||||
|
import LeftSider from '@/components/leftSider';
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles';
|
||||||
|
import { joyTheme } from './defaultTheme';
|
||||||
export const metadata = {
|
|
||||||
title: 'Create Next App',
|
|
||||||
description: 'Generated by create next app',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@ -14,8 +11,20 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" className="min-h-full font-sans">
|
||||||
<body className={inter.className}>{children}</body>
|
<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>
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
32
datacenter/components/colorSchemeToggle.tsx
Normal file
32
datacenter/components/colorSchemeToggle.tsx
Normal 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
42
datacenter/components/header.tsx
Normal 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
76
datacenter/components/leftSider.tsx
Normal 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
1388
datacenter/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,6 +9,14 @@
|
|||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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/node": "20.3.1",
|
||||||
"@types/react": "18.2.14",
|
"@types/react": "18.2.14",
|
||||||
"@types/react-dom": "18.2.6",
|
"@types/react-dom": "18.2.6",
|
||||||
@ -19,6 +27,7 @@
|
|||||||
"postcss": "8.4.24",
|
"postcss": "8.4.24",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
|
"swr": "^2.1.1",
|
||||||
"tailwindcss": "3.3.2",
|
"tailwindcss": "3.3.2",
|
||||||
"typescript": "5.1.3"
|
"typescript": "5.1.3"
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
datacenter/public/databerry-logo-icon.png
Normal file
BIN
datacenter/public/databerry-logo-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
@ -1,3 +1,5 @@
|
|||||||
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
@ -7,11 +9,9 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
backgroundImage: {
|
fontFamily: {
|
||||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
|
||||||
'gradient-conic':
|
}
|
||||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user