gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client: update header layout

This commit is contained in:
fantasticit 2022-05-26 10:04:14 +08:00
parent fb0e416065
commit f82d30f8c8
2 changed files with 49 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/client/src/layouts/router-header/index.module.scss
View File

@ -40,16 +40,3 @@
}
}
}
.mobileHeader {
display: flex;
width: 100%;
height: 60px;
padding-right: 24px;
padding-left: 24px;
border-right: none;
border-bottom: 1px solid var(--semi-color-border);
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}

95
packages/client/src/layouts/router-header/index.tsx
View File

@ -12,7 +12,6 @@ import { useWindowSize } from 'hooks/use-window-size';
import Router, { useRouter } from 'next/router';
import React from 'react';
import styles from './index.module.scss';
import { Recent, RecentModal } from './recent';
import { Wiki, WikiModal } from './wiki';
@ -77,51 +76,55 @@ export const RouterHeader: React.FC = () => {
return (
<SemiHeader>
{isMobile ? (
<div className={styles.mobileHeader}>
<Space>
<LogoImage />
<LogoText />
<RecentModal visible={recentModalVisible} toggleVisible={toggleRecentModalVisible} />
<WikiModal visible={wikiModalVisible} toggleVisible={toggleWikiModalVisible} />
<Dropdown
trigger="click"
position="bottomRight"
visible={dropdownVisible}
onVisibleChange={toggleDropdownVisible}
render={
// @ts-ignore
<Dropdown.Menu onClick={toggleDropdownVisible}>
{menus.slice(0, 1).map((menu) => {
return (
<Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
{menu.text}
</Dropdown.Item>
);
})}
<Dropdown.Item onClick={toggleRecentModalVisible}>最近</Dropdown.Item>
<Dropdown.Item onClick={toggleWikiModalVisible}>知识库</Dropdown.Item>
{menus.slice(3).map((menu) => {
return (
<Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
{menu.text}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<Button icon={<IconMenu />} type="tertiary" theme="borderless" onMouseDown={toggleDropdownVisible} />
</Dropdown>
</Space>
<Space>
<WikiOrDocumentCreator />
<Search />
<Message />
<Theme />
<User />
</Space>
</div>
<Nav
mode="horizontal"
style={{ overflow: 'auto' }}
header={
<Space>
<LogoImage />
<RecentModal visible={recentModalVisible} toggleVisible={toggleRecentModalVisible} />
<WikiModal visible={wikiModalVisible} toggleVisible={toggleWikiModalVisible} />
<Dropdown
trigger="click"
position="bottomRight"
visible={dropdownVisible}
onVisibleChange={toggleDropdownVisible}
render={
// @ts-ignore
<Dropdown.Menu onClick={toggleDropdownVisible}>
{menus.slice(0, 1).map((menu) => {
return (
<Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
{menu.text}
</Dropdown.Item>
);
})}
<Dropdown.Item onClick={toggleRecentModalVisible}>最近</Dropdown.Item>
<Dropdown.Item onClick={toggleWikiModalVisible}>知识库</Dropdown.Item>
{menus.slice(3).map((menu) => {
return (
<Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
{menu.text}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<Button icon={<IconMenu />} type="tertiary" theme="borderless" onMouseDown={toggleDropdownVisible} />
</Dropdown>
</Space>
}
footer={
<Space>
<WikiOrDocumentCreator />
<Search />
<Message />
<Theme />
<User />
</Space>
}
></Nav>
) : (
<Nav
mode="horizontal"