Ant Design Pro V5精讲（实践篇一）：自定义登录界面、主界面

用户需求

1.   登录界面改造成自己的
2.   主界面的logo及产品名称改造成自己的
3.    语言包去掉或者只留中英语言包

登录界面改造

进入pages/user/login目录找到index.tsx

// 去掉语言包栏目

      <div className={styles.container}>
      {/** 南极客 2021.5.8 去掉国际化语言支持
      <div className={styles.lang}>{SelectLang && <SelectLang />}</div>
      */}

// 设置产品logo和产品名称

      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <Link to="/">
              <img alt="logo" className={styles.logo} src="/logo.svg" />
              {/** 南极客 fixed 2021.5.8 */}
              <span className={styles.title}>eByteCloud微服务平台</span>
            </Link>
          </div>
          {/** 南极客 fixed 2021.5.8 */}
          <div className={styles.desc}>业务操作流程化、风险监管动态化、数据分析图表化、银担合作网络化</div>
        </div>

注：logo.svg改为自己的产品logo，此文件在public/目录下面。

// 去掉每次登录有有一个ant design pro一闪而过的页面,找到document.ejs注释掉

        <div style="display: flex; align-items: center; justify-content: center">
          <!--南极客 fixed 2021.6.3
          <img            
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px"
          />
          Ant Design
          -->          
          <img            
            src="<%= context.config.publicPath +'pro_icon.svg'%>"
            width="32"
            style="margin-right: 8px"
          />
          eByteCloud
        </div>
      </div>

主界面改造

// logo和产品名称,找到config/defaultSetting.ts中的title即为产品名称，logo即为public下的logo图版，其它配置见以下注释：

import { Settings as LayoutSettings } from '@ant-design/pro-layout';

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  // 南极客 2021.5.8  菜单导航主题模式 navTheme：‘light’ | ‘dark’; 正常|黑暗
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  // 南极客 2021.5.8 layout: 'side' | 'top' | 'mix';// 左侧菜单栏| 上边菜单栏|混合模式，会分割菜单，上面为一级菜单，左侧为二级菜单
  layout: 'mix',
  // 南极客 2021.5.8 内容区宽度contentWidth : ‘Fluid’ | ‘Fixed’; 流体|固定
  contentWidth: 'Fluid',
  // 南极客 2021.5.8 fixedHeader :false,是否固定头
  fixedHeader: false,
  // 南极客 2021.5.8 fixSiderbar :false,是否固定侧栏
  fixSiderbar: true,
  // 南极客 2021.5.8 colorWeak：true,色弱模式
  colorWeak: false,
  // 南极客 2021.5.8 
  title: 'eByteCloud微服务平台',
  pwa: false,
  // 南极客 2021.5.8 
  logo: 'logo.svg',
  // 南极客 2021.6.25 在线iconfont
  iconfontUrl: '',
  /* 以下内容 南极客 2021.6.16 新增设置*/
  // logo 所在栏高度
  headerHeight: 48,
  // 主题模式 顶部栏 ‘light’ | ‘dark’; 正常|黑暗 ，也可以直接设置颜色值，例如：‘#91d5ff’
  headerTheme: 'light',  // 不设置缺省是‘dark’
 // autoHideHeader: false, 
 // 菜单取消语言包
 /*
 menu: {
     locale: false,
 },
 */
};

export default Settings;

 // 去掉语言包的栏目,找到src/components/RightContest/index.tsx,同时还可以增加消息提示组件<NoticeIconView/>

        <QuestionCircleOutlined />
      </span>
      <NoticeIconView/>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      {/* 南极客 2021.6.5 注释掉语言选择，即不需要国际化支持
      <SelectLang className={styles.action} />
      */}
    </Space>

语言包及用法

说明：每个语言，它有多份文件组成，有菜单项的，有页面组件的，详见各语言目录，前缀必须按约定进行设置。

用法示例：

 /** 国际化配置 */
  const intl = useIntl();

  ${intl.formatMessage({
          id: 'pages.searchTable.tenThousand', //语言包中定义的常量
          defaultMessage: ' 万 ', // 表示当没有找到id时，显示此值。
        })}`,