Ant Design Pro / UmiJS 踩坑记录（持续更新）Ant Design Pro / UmiJS 踩坑记录

Ant Design Pro / UmiJS 踩坑记录（持续更新）

1. 若后端响应数据不包含 success 属性，则无法触发 errorConfig 的 errorThrower

Q. 在 .umi/plugin-request/request.ts 的源码中，当 success === false，且配置了 errorThrower 时，才会触发 errorThrower

// .umi/plugin-request/request.ts
requestInstance.interceptors.response.use((response) => {
  const { data } = response;
  if (data?.success === false && config?.errorConfig?.errorThrower) {
    config.errorConfig.errorThrower(data);
  }
  return response;
});

A. 前端在响应拦截器中添加 success 属性

/**
 * @name 错误处理
 * pro 自带的错误处理， 可以在这里做自己的改动
 * @doc https://umijs.org/docs/max/request#配置
 */
export const errorConfig: RequestConfig = {
  // ...

  // 响应拦截器
  responseInterceptors: [
    (response) => {
      // 拦截响应数据，进行个性化处理
      const { data } = response as unknown as ResponseStructure;
      // 前端添加success属性
      data.success = data.code === SUCCESS_CODE;
      return response;
    },
  ],
};

相关链接

2. 抖动问题大杂烩

Q1. 页面内容较多时，滚动条的出现；打开模态框时，滚动条的隐藏 -> 页面宽度抖动

A1. 添加全局样式，以下几种方案，推荐方案一。若有更好的方案，欢迎在评论区交流学习

// NOTE: 方案一，优点：简洁有效，缺点：不显示滚动条
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

// NOTE: 方案二，缺点：始终显示滚动条或始终预留滚动条宽度
html {
  overflow-y: scroll; // 始终显示滚动条
  // scrollbar-gutter: stable; // 始终预留滚动条宽度
}

body {
  /**
  ant-modal打开时，会将滚动条隐藏，导致页面宽度增加（增加的宽度为滚动条宽度）；
  antd的做法：modal打开时，将body宽度设为100%减去滚动条宽度，使宽度与有滚动条时保持一致。
  而由于上方设置始终显示滚动条或预留滚动条宽度，所以此处需要覆盖其内置样式，设为定宽100%。
  */
  width: 100% !important;
}

// NOTE：方案三，缺点：fixed定位元素（如顶部导航栏）是相对于浏览器视口定位，仍会抖动
html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw !important;
}

Q2. 异步获取表格数据，表格列宽抖动

A2. 表格设置 props: tableLayout="fixed"

Q3. proTable 搜索表单项宽度抖动，某些版本的 proComponetns 存在该问题

A3. proTable 设置 props: search={{span: 'number' | 'ColConfig'}}，建议设为 'ColConfig'以实现响应式

Q4. PageContainer 组件默认 padding 样式，内容布局抖动

A4. 添加全局样式

// FIX: PageContainer 布局抖动
.ant-pro-layout .ant-pro-layout-content {
  padding-block: 0;
  padding-inline: 0;
}

Q5. 动态路由菜单：加载 Iconify 的 icon 时，菜单项布局抖动

A5. 使用 Iconify Icon Web Component，并添加全局样式

// FIX: iconify-icon 图标加载抖动
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

Q6. 动态路由菜单：点击菜单项发生页面跳转时，icon 的闪烁

A6. app.tsx 中添加菜单项渲染方法

  // FIX：点击菜单项发生页面跳转时，icon的闪烁
  menuItemRender: (item, defaultDom) => {
    if (item.isUrl || !item.path) {
      return defaultDom;
    }
    return <Link to={item.path}>{defaultDom}</Link>;
  },