Ant Design Pro项目调整

创建好一个项目，完成登录后，开始布局

1.细节处修改

• 在config\defaultSettings.ts中修改红框标题title
• 在config\routes.ts中修改目录标题，同步修改到蓝框文字
• 在src/app.jsx的layout导出代码，启用的footerRender，自定义页脚footer的render方法，用于配置系统底部区域。直接删除配置即可。如果需要底部内容且需要修改成自己的文案，根据Footer组件的引用在src/components/Footer/index.jsx中找到Footer的代码，修改相应属性值即可

2.修改右上角头像信息

在src\components\RightContent\AvatarDropdown.tsx中添加“联系我们”

    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
    }, {
      key: 'contact',
      icon: <PhoneOutlined />,
      label:'联系我们'
    }

图标来源于图标 Icon - Ant Design (antgroup.com)

3.地址栏图标

public\favicon.ico

替换即可。

4.添加页面路由

config\routes.ts

5.编写页面

页面只有

import { PageContainer } from "@ant-design/pro-components";
import { useIntl } from "@umijs/max";
import React from "react";
const OrderStatistics: React.FC = () => {
    const intl = useIntl();
    return (
        // 包含路由的页面卡片
        // <PageContainer
            // content={intl.formatMessage({
            //     id:'pages.admin.subPage.title',
            //     defaultMessage:'这是一个页面？'
            // })}
        // >
            <p>略略略</p>
        // </PageContainer>
    )
}

export default OrderStatistics;

<PageContainer><PageContainer/> 是为了减少繁杂的面包屑配置和标题，很多页面都需要面包屑和标题的配置。当然也可以关掉自动生成的，而使用自己的配置。

PageContainer - 页容器 - ProComponents (ant.design)

6.学一下布局 ProCard

ProCard - 高级卡片 - ProComponents (ant.design)

<ProCard
        title='xxx'
        extra='yyy'
        bordered
        headerBordered
        split={responsive ? 'horizontal' : 'vertical'}
      >
        <ProCard split='horizontal' colSpan={16} >
          <ProCard split='horizontal'>
            <ProCard split={responsive ? 'horizontal' : 'vertical'}>
              <ProCard title="昨日全部流量">123</ProCard>
              <ProCard title="昨日全部流量">123</ProCard>
              <ProCard title="昨日全部流量">123</ProCard>
            </ProCard>

            <ProCard split='vertical'>
              <ProCard title='运行中试验'>12412</ProCard>
              <ProCard title='运行中试验'>12412</ProCard>
              <ProCard title='运行中试验'>12412</ProCard>
            </ProCard>
          </ProCard>

          <ProCard split='horizontal'>
            <ProCard split='vertical'>
              <ProCard title="图表1">
                1111
              </ProCard>
              <ProCard title="图表2">
                2222
              </ProCard>
            </ProCard>
            <ProCard split='vertical'>
              <ProCard title="图表3">
                3333
              </ProCard>
              <ProCard title="图表4">
                4444
              </ProCard>
            </ProCard>
          </ProCard>
        </ProCard>

        <ProCard title="右侧" split='horizontal'>
          <ProCard title="图表1">
            11111
          </ProCard>
          <ProCard title="图表2">
            22222
          </ProCard>
          <ProCard
            tabs={{
              type: 'card',
            }}>
            <ProCard.TabPane key="tab1" tab="产品一">
              <div>
                <div>111</div>
                <div>111</div>
                <div>111</div>
                <div>111</div>
              </div>

            </ProCard.TabPane>
            <ProCard.TabPane key="tab2" tab="产品二">
              内容二
            </ProCard.TabPane>
          </ProCard>

        </ProCard>

      </ProCard>

用法：就当div来使用即可，熟悉常用的属性。

历史遗留问题：在右下角的卡片式页签中，如果页签过多就会引起将布局撑开的情况，该如何解决

解决方式：暂未想到，搁置>M<。

7.搞的差不多了呢，就可以去下载一下图表 - Ant Design Pro

Ant Design Charts 是 G2Plot 的 React 版本，基于 React、TypeScript 封装了所有的 G2Plot 图表，继承了 G2Plot 的所有配置，对 React 技术栈的同学更加友好，统一团队开发。

但是呢，发现下载失败

发现是版本问题，你的项目需要ant-design-pro@6.0.0，但是发现了你的依赖中存在antd@5.8.6，而ant-design-pro@6.0.0要求的版本是antd@“^5.2.2”，两者存在不兼容的情况

根据引用，你可以使用–legacy-peer-deps参数来绕过npm对peerDependencies的检测报错，即执行"npm install --legacy-peer-deps"。另外，你也可以在.npmrc文件中配置legacy-peer-deps=true来实现相同的效果。然而，这种方法只是绕过了错误报错，而没有真正解决依赖关系存在的问题。因此，这种方式存在潜在隐患。

真正的解决方案是根据你的项目需要，重新安装满足依赖关系的版本。你可以尝试更新或降低ant-design-pro和antd的版本，使它们能够兼容。你可以在项目中的package.json文件中修改相应的依赖版本，然后执行"npm install"来安装新的依赖。

总结来说，你可以通过使用–legacy-peer-deps参数或在.npmrc文件中配置legacy-peer-deps=true来绕过错误报错，但这只是一种权宜之计。更好的解决方案是查找满足依赖关系的版本并进行安装。

以上是c知道给出的答案，真的牛皮啊，以后学啥都不用找师傅了，老师大概是最先被淘汰的吧。

还有咨询、顾问……扯远了，咱们来试试它说的行不行的通。

事实上，我并没有在package.json文件中找到antd@5.8.6，所以试试第一种法子

可行，使用npm install @ant-design/charts --legacy-peer-deps命令

用yarn add @ant-design/charts可能会更好（但我没试）

老规矩，要在外面嵌套一个指定宽高的“盒子”

更多图表参考官方文档AntV react 可视化组件库 | AntV