Table 在 flex 容器下自适应宽度，导致宽度溢出

index.css

.main .content .right{
  flex: auto;
  min-width: 0;
}

默认情况下，flex选项不会缩小低于他的最小内容尺寸(长单子的长度或固定尺寸元素)，改变这个问题可以去设置min-wdith或min-height属性，具体可以参考4.5的flex选项的潜在最小尺寸。

默认最小尺寸是内容尺寸，所以导致溢出，直接设置为0就可以让最小尺寸低于内容尺寸来解决溢出问题。

github-issus

Tree 虚拟滚动横向滚动条

Tree 数据超大时，需要通过 height 开启虚拟滚动，优化性能。

但这会导致横向滚动失效，某中场景会出现内容显示不全的问题。

官方也明确表示开启虚拟滚动后会导致无法横向滚动，但我们可以通过 css 强制开启横向滚动。

index.less

.ant-tree-list-holder {
  /* 滚动槽 */
  &::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
    -webkit-box-shadow: none;
  }
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    -webkit-box-shadow: none;
  }
 
  // 开启虚拟滚动时，适配横向滚动
  & > div {
    overflow: visible !important;
  }
}

Reference

issues

react-draggable 版本依赖问题

react-draggable 版本依赖版本不一致，导致无法正常使用。

通过 package.json 中的 resolutions 配置，指定 react-draggable 版本为 4.4.5 即可解决。

package.json

{
  "resolutions": {
    "react-draggable": "4.4.5"
  }
}

antd-tools

getUploadPropsInFormItem 获取 Antd Form.Item 下用于 Upload 组件的数据适配 props

antd-tools.ts

/**
 * 获取 Antd Form.Item 下用于 Upload 组件的数据适配 props
 * 用于 valuePropName、getValueProps、getValueFromEvent
 * 统一处理 form 与 Upload 组件的数据流格式
 */
export const getUploadPropsInFormItem = () => ({
  valuePropName: 'fileList',
  /**
   * 处理 Form 初始值 → Upload 组件 props.value (fileList)
   *
   * 始终返回 { fileList: [] } 格式
   */
  getValueProps: (value: any) => {
    if (!value) {
      return { fileList: [] };
    }
    // 如果是对象且有 fileList
    if (typeof value === 'object' && 'fileList' in value) {
      return {
        fileList: Array.isArray(value.fileList) ? value.fileList : [],
      };
    }
    // 兼容场景：直接传递 file 数组
    if (Array.isArray(value)) {
      return { fileList: value };
    }
    return { fileList: [] };
  },
  /**
   * 处理 Upload 组件 onChange 事件 → Form 字段值
   *
   * 始终返回 { fileList: [...] } 格式
   */
  getValueFromEvent: (e: any) => {
    if (!e) return { fileList: [] };
    if (Array.isArray(e)) return { fileList: e };
    const fileList = Array.isArray(e?.fileList) ? e.fileList : [];
    return { fileList };
  },
});