Write the Code. Change the World.

7月 23

ant design pro v5 在 /src/components/ 下暴露一些顶栏以及底栏的功能。可以在这里进行其功能定义。之前就说过,ant design pro 很多地方不完美,需要自己去打造和改变。

作为一个疯狂的极简的完美追求者, 打开 /src/components/RightContent/ 下的 index.tsx,删掉只剩下这么点东东了。

  return (
    <Space className={className}>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </Space>
  );

然后就只剩下头像和昵称了。

删掉 /src/components/HeaderSearch 这个目录。如果需要什么,再自己扩展。删掉不需要的引用。

修改 Avatar,暴露出个人中心等 dropMenu。虽然暴露了,可没有对应的路由页面,点击是 404 。如果想关掉,去掉 menu 设置。如果想扩展 dropMenu 的功能,可以在 ./AvatarDropdown 里边修改逻辑。

<Avatar  menu={true} />

额外

如何利用 React Hooks API 做全局状态管理?

https://umijs.org/plugins/plugin-initial-state#loading

7月 23

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 决定的。下边修改下配置,使得样式稍微好看一点。

继续阅读