You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

99 lines
2.3 KiB
TypeScript

'use client';
import {createStyles, useTheme} from 'antd-style';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import CloudBanner, { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
import { usePlatform } from '@/hooks/usePlatform';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
import { UserOutlined, SearchOutlined } from '@ant-design/icons';
import { LayoutProps } from './type';
import { Divider, Input, Avatar } from "antd";
const { Search } = Input;
const title = {
"/chat": '会话',
"/discover/assistants": "助手",
"/files": "工具",
"/model": "模型",
"/robot": "数字人",
"/plugins": "插件",
"/power": "算力",
"/knowledge": "知识库"
}
const useStyles = createStyles(({ css, token }) => ({
topCenten: css`
width: 100%;
background: #FFFFFF;
box-sizing: border-box;
/* 分割线颜色 */
border-width: 0px 0px 2px 0px;
border-style: solid;
border-color: rgba(187, 204, 253, 0.24);
`,
leftTitle: css`
font-size: 20px;
color: #3d3d3d;
display: inline-block
`,
dividerCen: css`
width: 2px;
height: 26px;
background-color: #d8d8d8;
margin: 8px 16px;
`,
ledDiv: css `
width: 50%;
display: inline-block;
`,
nameSpn: css`
margin-right: 80px;
margin-left: 8px;
display: inline-block;
`,
serchIcon: css`
color: #BCCEFF;
font-size: 24px;
`,
inp: css`
width: 283px;
margin-right: 43px;
background: #F3F6FF;
&:hover, &:active, &:focus {
border-color: transparent !important;
background: #F3F6FF !important;
}
`,
}))
const Layout = memo<LayoutProps>(({ children, nav }) => {
const { isPWA } = usePlatform();
const theme = useTheme();
const { styles, cx } = useStyles()
const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
return (
<>
{showCloudPromotion && <CloudBanner />}
<Flexbox
height={showCloudPromotion ? `calc(100% - ${BANNER_HEIGHT}px)` : '100%'}
horizontal
style={{
borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
position: 'relative',
}}
width={'100%'}
>
{nav}
{children}
</Flexbox>
</>
);
});
Layout.displayName = 'DesktopMainLayout';
export default Layout;