|
@@ -17,10 +17,10 @@ sidemenu: false
|
|
/**
|
|
/**
|
|
* background: '#f0f2f5'
|
|
* background: '#f0f2f5'
|
|
*/
|
|
*/
|
|
-import React from 'react';
|
|
|
|
-import Footer from '@/components/Footer';
|
|
|
|
|
|
+import React from 'react'
|
|
|
|
+import Footer from '@/components/Footer'
|
|
|
|
|
|
-export default () => <Footer />;
|
|
|
|
|
|
+export default () => <Footer />
|
|
```
|
|
```
|
|
|
|
|
|
## HeaderDropdown 头部下拉列表
|
|
## HeaderDropdown 头部下拉列表
|
|
@@ -31,9 +31,9 @@ HeaderDropdown 是 antd Dropdown 的封装,但是增加了移动端的特殊
|
|
/**
|
|
/**
|
|
* background: '#f0f2f5'
|
|
* background: '#f0f2f5'
|
|
*/
|
|
*/
|
|
-import { Button, Menu } from 'antd';
|
|
|
|
-import React from 'react';
|
|
|
|
-import HeaderDropdown from '@/components/HeaderDropdown';
|
|
|
|
|
|
+import { Button, Menu } from 'antd'
|
|
|
|
+import React from 'react'
|
|
|
|
+import HeaderDropdown from '@/components/HeaderDropdown'
|
|
|
|
|
|
export default () => {
|
|
export default () => {
|
|
const menuHeaderDropdown = (
|
|
const menuHeaderDropdown = (
|
|
@@ -43,13 +43,13 @@ export default () => {
|
|
<Menu.Divider />
|
|
<Menu.Divider />
|
|
<Menu.Item key="logout">退出登录</Menu.Item>
|
|
<Menu.Item key="logout">退出登录</Menu.Item>
|
|
</Menu>
|
|
</Menu>
|
|
- );
|
|
|
|
|
|
+ )
|
|
return (
|
|
return (
|
|
<HeaderDropdown overlay={menuHeaderDropdown}>
|
|
<HeaderDropdown overlay={menuHeaderDropdown}>
|
|
<Button>hover 展示菜单</Button>
|
|
<Button>hover 展示菜单</Button>
|
|
</HeaderDropdown>
|
|
</HeaderDropdown>
|
|
- );
|
|
|
|
-};
|
|
|
|
|
|
+ )
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
## HeaderSearch 头部搜索框
|
|
## HeaderSearch 头部搜索框
|
|
@@ -60,9 +60,9 @@ export default () => {
|
|
/**
|
|
/**
|
|
* background: '#f0f2f5'
|
|
* background: '#f0f2f5'
|
|
*/
|
|
*/
|
|
-import { Button, Menu } from 'antd';
|
|
|
|
-import React from 'react';
|
|
|
|
-import HeaderSearch from '@/components/HeaderSearch';
|
|
|
|
|
|
+import { Button, Menu } from 'antd'
|
|
|
|
+import React from 'react'
|
|
|
|
+import HeaderSearch from '@/components/HeaderSearch'
|
|
|
|
|
|
export default () => {
|
|
export default () => {
|
|
return (
|
|
return (
|
|
@@ -72,24 +72,24 @@ export default () => {
|
|
options={[
|
|
options={[
|
|
{ label: 'Ant Design Pro', value: 'Ant Design Pro' },
|
|
{ label: 'Ant Design Pro', value: 'Ant Design Pro' },
|
|
{
|
|
{
|
|
- label: 'Ant Design',
|
|
|
|
- value: 'Ant Design',
|
|
|
|
|
|
+ label: '投资项目云平台',
|
|
|
|
+ value: '投资项目云平台'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'Pro Table',
|
|
label: 'Pro Table',
|
|
- value: 'Pro Table',
|
|
|
|
|
|
+ value: 'Pro Table'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'Pro Layout',
|
|
label: 'Pro Layout',
|
|
- value: 'Pro Layout',
|
|
|
|
- },
|
|
|
|
|
|
+ value: 'Pro Layout'
|
|
|
|
+ }
|
|
]}
|
|
]}
|
|
- onSearch={(value) => {
|
|
|
|
- console.log('input', value);
|
|
|
|
|
|
+ onSearch={value => {
|
|
|
|
+ console.log('input', value)
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
- );
|
|
|
|
-};
|
|
|
|
|
|
+ )
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
### API
|
|
### API
|
|
@@ -112,9 +112,9 @@ export default () => {
|
|
/**
|
|
/**
|
|
* background: '#f0f2f5'
|
|
* background: '#f0f2f5'
|
|
*/
|
|
*/
|
|
-import { message } from 'antd';
|
|
|
|
-import React from 'react';
|
|
|
|
-import NoticeIcon from '@/components/NoticeIcon/NoticeIcon';
|
|
|
|
|
|
+import { message } from 'antd'
|
|
|
|
+import React from 'react'
|
|
|
|
+import NoticeIcon from '@/components/NoticeIcon/NoticeIcon'
|
|
|
|
|
|
export default () => {
|
|
export default () => {
|
|
const list = [
|
|
const list = [
|
|
@@ -123,29 +123,28 @@ export default () => {
|
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
|
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
|
|
title: '你收到了 14 份新周报',
|
|
title: '你收到了 14 份新周报',
|
|
datetime: '2017-08-09',
|
|
datetime: '2017-08-09',
|
|
- type: 'notification',
|
|
|
|
|
|
+ type: 'notification'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
id: '000000002',
|
|
id: '000000002',
|
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
|
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
|
|
title: '你推荐的 曲妮妮 已通过第三轮面试',
|
|
title: '你推荐的 曲妮妮 已通过第三轮面试',
|
|
datetime: '2017-08-08',
|
|
datetime: '2017-08-08',
|
|
- type: 'notification',
|
|
|
|
- },
|
|
|
|
- ];
|
|
|
|
|
|
+ type: 'notification'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
return (
|
|
return (
|
|
<NoticeIcon
|
|
<NoticeIcon
|
|
count={10}
|
|
count={10}
|
|
- onItemClick={(item) => {
|
|
|
|
- message.info(`${item.title} 被点击了`);
|
|
|
|
|
|
+ onItemClick={item => {
|
|
|
|
+ message.info(`${item.title} 被点击了`)
|
|
}}
|
|
}}
|
|
onClear={(title: string, key: string) => message.info('点击了清空更多')}
|
|
onClear={(title: string, key: string) => message.info('点击了清空更多')}
|
|
loading={false}
|
|
loading={false}
|
|
clearText="清空"
|
|
clearText="清空"
|
|
viewMoreText="查看更多"
|
|
viewMoreText="查看更多"
|
|
onViewMore={() => message.info('点击了查看更多')}
|
|
onViewMore={() => message.info('点击了查看更多')}
|
|
- clearClose
|
|
|
|
- >
|
|
|
|
|
|
+ clearClose>
|
|
<NoticeIcon.Tab
|
|
<NoticeIcon.Tab
|
|
tabKey="notification"
|
|
tabKey="notification"
|
|
count={2}
|
|
count={2}
|
|
@@ -171,8 +170,8 @@ export default () => {
|
|
showViewMore
|
|
showViewMore
|
|
/>
|
|
/>
|
|
</NoticeIcon>
|
|
</NoticeIcon>
|
|
- );
|
|
|
|
-};
|
|
|
|
|
|
+ )
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
### NoticeIcon API
|
|
### NoticeIcon API
|
|
@@ -212,17 +211,17 @@ export default () => {
|
|
|
|
|
|
```tsx | pure
|
|
```tsx | pure
|
|
export interface NoticeIconData {
|
|
export interface NoticeIconData {
|
|
- id: string;
|
|
|
|
- key: string;
|
|
|
|
- avatar: string;
|
|
|
|
- title: string;
|
|
|
|
- datetime: string;
|
|
|
|
- type: string;
|
|
|
|
- read?: boolean;
|
|
|
|
- description: string;
|
|
|
|
- clickClose?: boolean;
|
|
|
|
- extra: any;
|
|
|
|
- status: string;
|
|
|
|
|
|
+ id: string
|
|
|
|
+ key: string
|
|
|
|
+ avatar: string
|
|
|
|
+ title: string
|
|
|
|
+ datetime: string
|
|
|
|
+ type: string
|
|
|
|
+ read?: boolean
|
|
|
|
+ description: string
|
|
|
|
+ clickClose?: boolean
|
|
|
|
+ extra: any
|
|
|
|
+ status: string
|
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
@@ -238,26 +237,25 @@ RightContent 是以上几个组件的组合,同时新增了 plugins 的 `Selec
|
|
options={[
|
|
options={[
|
|
{ label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
|
|
{ label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
|
|
{
|
|
{
|
|
- label: <a href="next.ant.design">Ant Design</a>,
|
|
|
|
- value: 'Ant Design',
|
|
|
|
|
|
+ label: <a href="next.ant.design">投资项目云平台</a>,
|
|
|
|
+ value: '投资项目云平台'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: <a href="https://protable.ant.design/">Pro Table</a>,
|
|
label: <a href="https://protable.ant.design/">Pro Table</a>,
|
|
- value: 'Pro Table',
|
|
|
|
|
|
+ value: 'Pro Table'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
|
|
label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
|
|
- value: 'Pro Layout',
|
|
|
|
- },
|
|
|
|
|
|
+ value: 'Pro Layout'
|
|
|
|
+ }
|
|
]}
|
|
]}
|
|
/>
|
|
/>
|
|
<Tooltip title="使用文档">
|
|
<Tooltip title="使用文档">
|
|
<span
|
|
<span
|
|
className={styles.action}
|
|
className={styles.action}
|
|
onClick={() => {
|
|
onClick={() => {
|
|
- window.location.href = 'https://pro.ant.design/docs/getting-started';
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
|
|
+ window.location.href = 'https://pro.ant.design/docs/getting-started'
|
|
|
|
+ }}>
|
|
<QuestionCircleOutlined />
|
|
<QuestionCircleOutlined />
|
|
</span>
|
|
</span>
|
|
</Tooltip>
|
|
</Tooltip>
|