🧐[问题 | question]V6版本菜单收起后，侧边菜单底部的一些快捷链接，配置的links效果不是很好

[edifangyi]

🧐 问题描述 | Problem description

会遮住一些

💻 示例代码 | Sample code

🚑 其他信息 | Other information

OS:

Node：

浏览器 | browser：

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🤔 分析 | Analysis

根据用户提供的截图，我们可以看到在 V6 版本的菜单收起后，侧边菜单底部的一些快捷链接会被遮挡住。根据用户的描述，这与配置的 links 有关。

🏗 解决方案 | Solution

要解决这个问题，可以尝试使用 footerRender 属性来自定义侧边菜单的底部内容，并保证快捷链接不被遮挡。

首先，将 src/layouts/BasicLayout.tsx 文件中的 ProLayout 组件的 footerRender 属性添加如下代码：

footerRender={() => {
  return (
    <div style={{ padding: '16px', textAlign: 'center' }}>
      // 在这里添加你的快捷链接的代码
    </div>
  );
}}

然后，可以在 <div> 元素中添加你的快捷链接的代码，确保它们不会被遮挡住。

例如，可以使用 Ant Design 的 Tag 组件来创建快捷链接。以下是一个示例代码：

import { Link } from 'umi';
import { Tag } from 'antd';
// ...

<footerRender={() => {
  return (
    <div style={{ padding: '16px', textAlign: 'center' }}>
      <Tag color="blue">
        <Link to="/path1">Link 1</Link>
      </Tag>
      <Tag color="green">
        <Link to="/path2">Link 2</Link>
      </Tag>
      <Tag color="red">
        <Link to="/path3">Link 3</Link>
      </Tag>
    </div>
  );
}}

这样配置后，侧边菜单底部的快捷链接就不会被遮挡了。

📚 相关文档 | Related documentation

• Ant Design Pro V6 文档: https://beta-pro.ant.design/docs/getting-started
• Ant Design Tag 组件文档: https://ant.design/components/tag-cn/