Logo Title以及Loading 的改造

原创已于 2022-10-27 14:31:00 修改 · 609 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Ant Design Pro+Amis构建后台管理系统

于 2022-10-27 14:21:58 首次发布

博客围绕Ant Design Pro管理后台交付用户使用的修改需求展开。介绍了修改Logo和Title的方法，可在defaultSetting.ts文档中直接修改；还说明了修改Loading界面的方式，因采用umi替代webpack，可在document.ejs模板里修改相关代码。

考虑到我们创建的管理后台是需要交付给我们的用户使用的，直接用Ant Design Pro的Title和Logo显然不合适，所以我们需要把它们改造成我们自己的。

修改Logo和Title

这个动作是非常方便的，Ant 提供一个defaultSetting.ts文档，里面是系统的默认设置，直接修改就可以。

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Ant Design Pro',
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

1、修改Title是非常方便的，我们可以直接把第13行的title改成：“Admin System”。
2、为了修改logo图标，我们自己先做一个图标命名为logo.svg并复制到public里面
3、修改defaultSetting.ts第15行为“/logo.svg”
修改后的defaultSetting.ts如下：

import { Settings as LayoutSettings } from '@ant-design/pro-layout';

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Ant Design Pro',
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

export default Settings;

修改前后的呈现效果对比如下：在这里插入图片描述

修改Loading

因为Ant Design Pro在页面未加载完Javascript代码的时候，会有一个Loading的呈现效果如下：
在这里插入图片描述
作为要交付给客户使用的项目，我们希望这个界面也是我们自己的内容。
那么这个界面要怎么修改呢，Ant Design Pro设计采用umi替代webpack，而document.ejs模板是umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。它实际上是一个html模版，里面
有一个div就是react的挂载点：

<body>
    <div id="root"></div>
 </body>

可以简单的理解成React 会重写这个id为"root"的div

（这个和Vue框架public文件夹里面的index.html是一样的），在本项目里面，document.ejs位于/src/pages/里面，打开之后，可以看到代码最后是这样的：

  <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          min-height: 420px;
        "
      >
        <img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin"
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
            ></span>
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: center">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px"
          />
          Ant Design
        </div>
      </div>

其中第11行src="<%= context.config.publicPath +‘pro_icon.svg’%>"表示该图片是加载public文件夹里面的pro_icon.svg文件，我们可以把这段html模版改成我们的图片和内容如下（主要是修改11行和22行）

<img src="<%= context.config.publicPath +'logo.svg'%>" alt="logo" width="256" />
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin"
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
            ></span>
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: center">
          <img
            src="<%= context.config.publicPath +'logo.svg'%>"
            width="32"
            style="margin-right: 8px"
          />
          Jimmy Design
        </div>

修改后js加载前的loading效果如下：
在这里插入图片描述