源码参考
Ant Design Pro V5 框架自带的欢迎页。
路由
config/routes.ts
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
菜单图标设置
上面 icon 的图标，可以从
https://ant.design/components/icon-cn/
页面中选择，然后复制到 icon 配置。
如果想自定义，可以参考：
https://pro.ant.design/docs/biz-icon-cn
页面部分
以欢迎页为例：
src/pages/Welcome.tsx
src/pages/Welcome.less
I18N 翻译文本
但是并没有找到“欢迎”对应的标题设置在哪里。
> grep 欢迎 -r src/
src/locales/zh-CN/menu.ts: 'menu.welcome': '欢迎',
原来 name 配置默认走了 I18N 的翻译资源文件。
实际上修改一些文字描述也在 locale 资源文件中，例如：
> grep 已经发布 -r src/
src/locales/zh-CN/pages.ts: 'pages.welcome.alertMessage': '更快更强的重型组件，已经发布。',
修改保存之后，web 服务会自动重启并刷新界面，非常方便。
Ant Design Pro V5 对应的 Ant Design 版本
查看 package.json 文件
"dependencies": {
"@ant-design/icons": "^4.5.0",
"@ant-design/pro-descriptions": "^1.6.8",
"@ant-design/pro-form": "^1.18.3",
"@ant-design/pro-layout": "^6.15.3",
"@ant-design/pro-table": "^2.30.8",
"@umijs/openapi": "^1.1.14",
"@umijs/plugin-openapi": "^1.2.0",
"@umijs/route-utils": "^1.0.36",
"antd": "^4.14.0",
可以看到 对应的 antd 版本，而当前最新的是 4.15 版本。
例如要想调整 Welcome 界面中的 Alert 组件的设置，就可以去 Antd 文档中查看。
https://ant.design/components/alert-cn/#header
所以，对 Antd 的组件需要有一个概要的了解。
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式