Antd Pro V4 样式修改大全(有图有真相)

Antd Pro V4 样式修改大全

一、左侧菜单的logo和标题

在这里插入图片描述
(1)logo修改
BasicLayout.jsx

import logo from '../assets/example.jpg'; // 替换成自己的logo即可

(2)文字标题
defaultSettings.js

const proSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: false,
  },
  title: '试验',  // 在此处修改成自己的标题
  pwa: false,
  iconfontUrl: '',
};
export default proSettings;
二、title文字和图标

src/pages/document.ejs
在这里插入图片描述
在这里插入图片描述

<title>试验</title>
<link rel="icon" href="<%= context.config.publicPath +'example.jpg'%>" type="image/x-icon" />

为了方便大家修改,笔者在此处再插入一些ejs的知识点

  1. 标签:<%= 输出数据到模板(输出是转义 HTML 标签)
  2. context 函数执行时的上下文环境

其它内容如果大家感兴趣的话可以自行翻阅:
EJS 模板引擎
Umi JS 开发技巧
此处笔者是将example.jpg放在了cofig文件夹下,大家可以自行更改,换成assets或其它文件夹下

三、页面刷新的时候出现的Pro图标

src/pages/document.ejs

<img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
//对应的是大的Pro图标
        <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; justify-content: center; align-items: center;">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px;"
          />  //对应蚂蚁金服的Logo
          Ant Design
        </div>

笔者在公司刷新的时候还会跳出来,不知道为毛线在家里就截不到图了,但是修改的话的确就是在这里,大家可以自行修改

四、主题颜色

(1)主题颜色
在这里插入图片描述
在这里插入图片描述
config/defaultSettings.js

const proSettings = {
  navTheme: 'light',    //只有dark和light两种
 。。。。
};
export default proSettings;
五、更换登录界面背景图片

src/layouts/UserLayout.less
在这里插入图片描述

@media (min-width: @screen-md-min) {
  .container {
    background-image: url('../assets/bg.jpg');  //修改成自己的背景图片
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .content {
    padding: 32px 0 24px;
  }
}
六、页脚标注

layouts/BasicLayout.jsx

const defaultFooterDom = (
  <DefaultFooter
    copyright={`自己填写相关公司的信息`}
    links={
      [
      // {
      //   key: 'Ant Design Pro',
      //   title: 'Ant Design Pro',
      //   href: 'https://pro.ant.design',
      //   blankTarget: true,
      // },
      // {
      //   key: 'github',
      //   title: <GithubOutlined />,
      //   href: 'https://github.com/ant-design/ant-design-pro',
      //   blankTarget: true,
      // },
      // {
      //   key: 'Ant Design',
      //   title: 'Ant Design',
      //   href: 'https://ant.design',
      //   blankTarget: true,
      // },
    ]
  }
  />
);

感谢阅读,欢迎批评指正,希望大家能够在追求卓越中不断进步,让优秀成为一种习惯~

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Ant Design Pro v4 是一个基于 Ant Design 设计语言的企业级中后台前端/设计解决方案,其中包含了一些用于数据模拟的 mock 功能。在 Pro v4 中,mock 数据是通过 umi-request 库来实现的。 要在 Ant Design Pro v4 中使用 mock 功能,你可以按照以下步骤进行操作: 1. 在 `src` 目录下创建一个名为 `mock` 的文件夹。 2. 在 `mock` 文件夹中创建一个名为 `api.ts` 的文件,用于编写接口的 mock 数据。 3. 在 `api.ts` 文件中,你可以使用 umi-request 提供的 `extend` 方法来创建一个请求实例,并通过 `mock` 方法来定义接口的 mock 数据。例如: ```typescript import { extend } from 'umi-request'; const request = extend({ prefix: '/api', timeout: 1000, }); export default { 'GET /api/user': { id: 1, name: 'John Doe', }, 'POST /api/login': (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ status: 'ok', message: 'Login successful!', }); } else { res.send({ status: 'error', message: 'Invalid username or password!', }); } }, 'PUT /api/user/:id': (req, res) => { const { id } = req.params; const { name } = req.body; res.send({ id, name, }); }, }; ``` 在上面的例子中,我们定义了三个接口的 mock 数据:`GET /api/user`、`POST /api/login` 和 `PUT /api/user/:id`。 4. 在 `src` 目录下的 `models` 文件夹中创建一个名为 `mock.ts` 的文件,并在该文件中导入 `api.ts` 中定义的 mock 数据。例如: ```typescript import api from '@/mock/api'; const enableMock = true; // 是否开启 mock 功能 if (enableMock) { Object.keys(api).forEach((key) => { const [method, path] = key.split(' '); const [mockMethod, mockPath] = method.split('_'); if (mockMethod && mockPath) { umiMocker(mockMethod.toUpperCase(), mockPath, api[key]); } }); } ``` 在上面的例子中,我们通过遍历 `api.ts` 中定义的 mock 数据,并使用 `umiMocker` 方法来注册 mock 接口。 5. 在 `src/app.tsx` 文件中,将 `import './mock';` 添加到文件开头,以确保 mock 数据在应用启动时被加载。例如: ```typescript import './mock'; ``` 完成以上步骤后,当你在开发环境下运行 Ant Design Pro v4 时,接口请求将会被拦截并返回 mock 数据。 请注意,以上只是一个简单的示例,你可以根据自己的需求来编写更复杂的 mock 数据。另外,需要注意的是,在生产环境下是不会启用 mock 功能的,mock 数据只会在开发环境中生效。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值