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