用户需求
- 登录界面改造成自己的
- 主界面的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 在线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时,显示此值。
})}`,