优秀的编程知识分享平台

网站首页 > 技术文章 正文

青锋微服务架构之-Ant Design Pro 基本配置

nanyue 2024-07-18 04:06:13 技术文章 7 ℃

青锋 (msxy) - Gitee.com

1、更换 Ant Design Pro 的 logo 和名称

需要修改文件所在位置:/config/defaultSetting.js

const proSettings: DefaultSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: '青锋后台系统',
  pwa: false,
  iconfontUrl: '',
  menu: {
    locale: false,
  },
};

将其中的 title 改成公司的项目名称即可。

2、清除头部不必要的小组件

文件所在位置:src/components/GlobalHeader/RightContent.js

return (
    <div className={className}>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder="站内搜索"
        defaultValue="umi ui"
        options={[
          { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
          {
            label: <a href="next.ant.design">Ant Design</a>,
            value: 'Ant Design',
          },
          {
            label: <a href="https://protable.ant.design/">Pro Table</a>,
            value: 'Pro Table',
          },
          {
            label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
            value: 'Pro Layout',
          },
        ]}
        // onSearch={value => {
        //   //console.log('input', value);
        // }}
      /> */}
      <Tooltip title="使用文档">
        <a
          style={{
            color: 'inherit',
          }}
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      <SelectLang className={styles.action} />
    </div>
  );

HeaderSearch、Tooltip、NoticeIcon、HeaderDropdown、SelectLang 它们分别代表 "全局搜索"、"使用文档"、"消息通知框"、"用户信息"、"国际化切换",将不需要的内容注释掉即可。


3、更换地址栏图标

文件所在位置:/public/favicon.ico

制作自己的地址图标进行替换即可。

在线制作ico图标地址:https://www.bitbug.net/

大家可以根据自己的实际情况制作自己的地址图标即可。

替换后依然没有起作用。这是有缓存的问题,解决办法:重启浏览器,或者重启一下本地服务器(npm start)即可。

Tags:

最近发表
标签列表