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

時間 2020-04-01

標籤 antd pro2.0 pro 使用記錄右側頂部菜單新建頁面简体版

原文原文鏈接

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

因爲 /layouts 所有隻是佈局相關的，與具體顯示內容信息無關html

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

-- /****.less 佈局設置segmentfault

其具體實如今 src/components/GlobalHeader/ RightContent.js 裏面：antd

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>
    );

現更改以下：app

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

新建一個頁面

1. 在路由中新建一條頁面的配置。先不要管報錯，由於路由對應的 component 和 models 你尚未，繼續往下看。創建相似以下：less

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)

相似以下：svg

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

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

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

其他 zh-**/menu.js 下相似。oop

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'