非你网

ant design pro 版本总是更新，总是没稳定下来。前段时间 v5 也出来了，和 v4 差别蛮大的。就样式来说，我更喜欢宽点的侧边栏，更喜欢将侧边栏伸缩按钮放在顶部。更喜欢暴露更多的 layout，去定义自己想要的。喜欢更简洁，更少的展示的元素。不是专业研究前端的，核心东西还是没深入。从零开始创建项目以及变更项目吧。

安装

yarn create umi

# 选择 ant design pro
# 选择 v5
# 等待下载

# 安装依赖包
yarn 

# 启动，先看看效果(默认样式太丑陋，兼职无语)
yarn start

# git 操作
git init
git add .
git commit -m 'ant-design-pro-v5-initialize'

到此， ant design pro v5 已经安装完成。但页面太丑陋，和曾经的页面完全不是一个样。页面丑陋是由 div 和 css 决定的。下边修改下配置，使得样式稍微好看一点。

修改配置

https://beta-pro.ant.design/index-cn v5 官网，感觉还是 low。做事情做了，却做不完美。现在打开预览页。

https://preview.pro.ant.design/dashboard/analysis

点击右侧的悬浮按钮，设置出自己想要的布局。并复制设置信息。

{
  "navTheme": "dark",
  "primaryColor": "#1890ff",
  "layout": "side",
  "contentWidth": "Fluid",
  "fixedHeader": true,
  "fixSiderbar": true,
  "menu": {
    "locale": true
  },
  "title": "Ant Design Pro",
  "pwa": false,
  "iconfontUrl": "",
  "splitMenus": false
}

将该复制信息，合并到 /config/defaultSettings.ts 中。这个时候，你会发现，以前的颜色布局回来了。

v5 不支持多套模板

v5 不支持多套模板，所以登录注册页面，在路由处加入了 layout:false 来处理模板渲染的问题。我就不要套用模板，我就要单纯的登录注册页面。不过，登录注册页面太丑了，后边会重新写。

修改侧边栏宽度

在 /config/config.ts 的 layout 下，添加 siderWidth: 256 即可。如：

…
export default defineConfig({
    …
    layout: {
        …
        locale: true,
        siderWidth: 256,
    }
}）

修改侧边栏的文字以及 logo

修改 /config/defaultSettings.ts 中 title 就可以修改文字了。
修改 /config/config.ts 中 layout 下增加 logo 配置就可以了。如果 logo 配置为 false，就不显示 logo，如果 logo 是 cdn url 或相对路径，就会显示对应的 logo。不过，终究只是替换，样式这些没办法更改了。

…
export default defineConfig({
    …
    layout: {
        …
        locale: true,
        siderWidth: 256,
        // 不显示 logo
        logo: false 
        logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K'
    }
}）