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.
112 lines
3.2 KiB
TypeScript
112 lines
3.2 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 } from '@ant-design/icons';
|
|
import { LayoutProps } from './type';
|
|
import { Divider, Avatar } from "antd";
|
|
|
|
const title = {
|
|
"/chat": '会话',
|
|
"/discover/assistants": "助手",
|
|
"/files": "工具",
|
|
"/knowledge": "知识库",
|
|
"/model": "模型",
|
|
"/plugins": "插件",
|
|
"/power": "算力",
|
|
"/robot": "数字人",
|
|
}
|
|
const useStyles = createStyles(({ css }) => ({
|
|
dividerCen: css`
|
|
width: 1px;
|
|
height: 26px;
|
|
background-color: #d8d8d8;
|
|
margin: 8px 16px;
|
|
`,
|
|
inp: css`
|
|
width: 283px;
|
|
margin-right: 43px;
|
|
background: #F3F6FF;
|
|
&:hover, &:active, &:focus {
|
|
border-color: transparent !important;
|
|
background: #F3F6FF !important;
|
|
}
|
|
`,
|
|
ledDiv: css `
|
|
width: 50%;
|
|
display: inline-block;
|
|
`,
|
|
leftTitle: css`
|
|
font-size: 20px;
|
|
color: #3d3d3d;
|
|
display: inline-block
|
|
`,
|
|
nameSpn: css`
|
|
margin-right: 16px;
|
|
margin-left: 18px;
|
|
display: inline-block;
|
|
`,
|
|
serchIcon: css`
|
|
color: #BCCEFF;
|
|
font-size: 24px;
|
|
`,
|
|
topCenten: css`
|
|
width: 100%;
|
|
line-height: 60px;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
/* 分割线颜色 */
|
|
border-width: 0px 0px 2px 0px;
|
|
border-style: solid;
|
|
border-color: rgba(187, 204, 253, 0.24);
|
|
`,
|
|
}))
|
|
|
|
const Layout = memo<LayoutProps>(({ children, nav }) => {
|
|
const { isPWA } = usePlatform();
|
|
const theme = useTheme();
|
|
const { styles, cx } = useStyles()
|
|
console.log(window?.location?.pathname,'3837373666router--------------------------------------------')
|
|
const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
|
|
const pathName = window?.location?.pathname
|
|
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}
|
|
<div style={{ width: '100%' }}>
|
|
<div className={cx(styles.topCenten)}>
|
|
<div className={cx(styles.ledDiv)}>
|
|
<span className={cx(styles.leftTitle)} style={{ marginLeft: '16px' }}>集智AI</span>
|
|
<Divider className={cx(styles.dividerCen)} type="vertical" />
|
|
<span className={cx(styles.leftTitle)}>{title[pathName]}</span>
|
|
</div>
|
|
<div className={cx(styles.ledDiv)} style={{ height: '42px', lineHeight: "42px", textAlign: 'right' }}>
|
|
<Avatar icon={<UserOutlined />} style={{ backgroundColor: '#90ACFF' }}/>
|
|
<span className={cx(styles.nameSpn)}> 张末末</span>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</Flexbox>
|
|
</>
|
|
);
|
|
});
|
|
|
|
Layout.displayName = 'DesktopMainLayout';
|
|
|
|
export default Layout;
|