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

用户需求

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

登录界面改造

进入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 在线iconfonticonfontUrl: '',/* 以下内容 南极客 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时，显示此值。})}`,

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

Umi v3 Ant Design Pro v5 从零开始实战视频教程（34 个视频）
Umi v3 & Ant Design Pro v5 从零开始实战视频教程(34 个视频) Umi v3 & Ant Design Pro v5 视频教程,从零开始学习,搭建一个完整的 ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
ant design pro v5去掉水印
ant design pro v5去掉水印 ant design pro v5去掉水印 ant design pro v5去掉水印配置水印,水印是 PageContainer 的功能,layout ...
Ant Design Pro V5删除自带的国际化
Ant Design Pro V5删除自带的国际化最近做了一个基于Ant Design pro v5 + umi3的集团晋升系统,运行项目的时候,路由那边自定义name的时候会触发框架自带的国际化, ...
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程（13 个视频）
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程(13 个视频) Ant Design Pro v5 正式版出来了,跟之前的版本在代码上有些细微的差异,这套 ...
ant design pro v5 总结
Ant Design Pro v5 使用心得相比V4,V5到底强在哪? 如何更改 title图标和加载时的页面? defaultSettings中菜单的几种模式及主题等配置国际化 request ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
Ant Design Pro V5 入门指南
一.安装及完整区块.运行.打包命令 API: V5版:https://beta-pro.ant.design/index-cn ProTable:https://protable.ant.design ...
Ant Design Pro V5 初体验（typescript版）
官网网站开箱即用的中台前端/设计解决方案https://pro.ant.design/zh-CNGitHub网站 GitHub - ant-design/ant-design-pro: