antd pro2.0 使用記錄四：右側頂部菜單欄+新建頁面

主要處理下圖部分（主右邊模塊）設置：

 由於 /layouts   全部只是布局相關的，與具體顯示內容信息無關

           --   / ***.js  提供對應方法

           --  /****.less  布局設置

其具體實現在 src/components/GlobalHeader/ RightContent.js 里面：

return (
      <div className={className}>
        //搜索框
        <HeaderSearch
          className={`${styles.action} ${styles.search}`}
          placeholder={formatMessage({ id: 'component.globalHeader.search' })}
          dataSource={[
            formatMessage({ id: 'component.globalHeader.search.example1' }),
            formatMessage({ id: 'component.globalHeader.search.example2' }),
            formatMessage({ id: 'component.globalHeader.search.example3' }),
          ]}
          onSearch={value => {
            console.log('input', value); // eslint-disable-line
          }}
          onPressEnter={value => {
            console.log('enter', value); // eslint-disable-line
          }}
        />

        //幫助文檔
        <Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
          <a
            target="_blank"
            href="https://pro.ant.design/docs/getting-started"
            rel="noopener noreferrer"
            className={styles.action}
          >
            <Icon type="question-circle-o" />
          </a>
        </Tooltip>

        //未處理提醒
        <NoticeIcon
          className={styles.action}
          count={currentUser.unreadCount}
          onItemClick={(item, tabProps) => {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          loading={fetchingNotices}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }),
            notification: formatMessage({ id: 'component.globalHeader.notification' }),
            message: formatMessage({ id: 'component.globalHeader.message' }),
            event: formatMessage({ id: 'component.globalHeader.event' }),
          }}
          onClear={onNoticeClear}
          onPopupVisibleChange={onNoticeVisibleChange}
          onViewMore={() => message.info('Click on view more')}
          clearClose
        >
          <NoticeIcon.Tab
            count={unreadMsg.notification}
            list={noticeData.notification}
            title="notification"
            emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            showViewMore
          />
          <NoticeIcon.Tab
            count={unreadMsg.message}
            list={noticeData.message}
            title="message"
            emptyText={formatMessage({ id: 'component.globalHeader.message.empty' })}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
            showViewMore
          />
          <NoticeIcon.Tab
            count={unreadMsg.event}
            list={noticeData.event}
            title="event"
            emptyText={formatMessage({ id: 'component.globalHeader.event.empty' })}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
            showViewMore
          />
        </NoticeIcon>
        {currentUser.name ? (
          <HeaderDropdown overlay={menu}>
            <span className={`${styles.action} ${styles.account}`}>
              <Avatar
                size="small"
                className={styles.avatar}
                src={currentUser.avatar}
                alt="avatar"
              />
              <span className={styles.name}>{currentUser.name}</span>
            </span>
          </HeaderDropdown>
        ) : (
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        )}

        //語言選擇
        <SelectLang className={styles.action} />
      </div>
    );

 

現更改如下：

• 搜索提示刪除：刪除  <HeaderSearch /> 里的 DataSource={} 屬性
• 增加 help 頁面，設置幫助跳轉路由：直接跳轉自己新添加的 help 頁面

 

新建一個頁面

1. 在路由中新建一條頁面的配置。先不要管報錯，因為路由對應的 component 和 models 你還沒有，繼續往下看。建立類似如下：

1.1 在src->pages->『新建文件夾』Help->『新建js文件』index.js  和 『新建less文件』index.less， 如下：

    

填入如下代碼：

// 這是 src/pages/Help/index.js 內容
import React, { PureComponent } from "react";
// 面包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入less
import styles from "./NewPage.less";

export default class Help extends PureComponent {
  render() {
    return (
      <PageHeaderWrapper>
        <div>
          HELLO WORD!
        </div>
      </PageHeaderWrapper>
    );
  }
}；

// 這是src/pages/Help/index.less內容
//樣式文件默認使用 CSS Modules，如果需要，你可以在樣式文件的頭部引入 antd 樣式變量文件：
//這樣可以很方便地獲取 antd 樣式變量並在你的文件里使用，有利於保持頁面的一致性，也方便實現定制主題。
@import "~antd/lib/style/themes/default.less";

 

2. routes 添加路由  

2.1 在config->router.config.js->『47行新增如下內容』：

// 這行是新增的內容
{
    path: "/help",
    icon: "file",
    name: "help",
    component: "./Help"
},
![clipboard.png](/img/bVbppqB)

類似如下：

2.2 做完如上步驟其實功能是完成了，但是 pro 2.x 版本中加入了菜單國際化中。所以進行修改：

在src->locales->zh-CN->menu.js->『11行新增如下內容』

'menu.help': '幫助文檔',

 其余 zh-**/menu.js 下類似。

3. 查看效果

3.1 運行效果
 

3.2 讓我做一道連線題吧

4. 頁面頭部 help 跳轉更改：

   更改 src/components/GlobalHeader/RightContent.js 里 render 部分的 <a> 鏈接部分

//  src/components/GlobalHeader/RightContent.js 原來代碼：
//幫助文檔
<Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
    <a
        target="_blank"   // 指定在新頁面打開
        href="https://pro.ant.design/docs/getting-started"  //新頁面打開的路由
        rel="noopener noreferrer"  
        className={styles.action}
     >
         <Icon type="question-circle-o" /> //顯示內容：此處為圖標
     </a>
</Tooltip>

將 此處代碼替換為：

<Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
   <Link
      to="/help"
      rel="noopener noreferrer"
      className={styles.action}
   >
      <Icon type="question-circle-o" />
   </Link>
</Tooltip>

//注意：使用 Link， 需引入： import Link from '@umi/link'

 

    

參考：https://segmentfault.com/a/1190000018407336

上篇：antd pro2.0 使用記錄三：多個接口調用問題

下篇：antd pro2.0 使用記錄五：設置代理+與服務端交互