尧图网页设计 
Ant Design Anchor 组件 targetOffset 详解精确控制锚点滚动偏移与居中定位【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 的 Anchor锚点组件中targetOffset用于精确控制点击锚点链接后的滚动偏移量让目标区块的定位不受固定头部Fixed Header、吸顶导航等遮挡元素的影响。本文以仓库中的 targetOffset 官方示例 为骨架结合 Anchor 组件源码、滚动工具函数 与单元测试系统讲解targetOffset的作用原理、与offsetTop的优先级关系并给出可直接复用的完整实现方案。读完本文你将能够通过一行配置让锚点目标精确滚动到屏幕任意位置包括屏幕正中间。一、场景引入为什么锚点需要滚动偏移锚点的核心能力是点击导航滚动到页面中对应区块。但在真实业务页面中目标区块往往会被以下元素遮挡页面上方固定的全局导航栏 / 顶部工具栏吸顶的筛选条、搜索框演示页面中固定position: fixed的占位区块。如果不做任何偏移处理点击锚点后目标区块顶部会躲到这些固定元素下面首屏看到的不是区块内容而是被遮挡的空白。targetOffset就是为此设计的修正量——它决定滚动停止时目标区块顶部与滚动容器顶部之间保留的距离。注意targetOffset是 Ant Design 5.x 之后推荐的滚动偏移方案官方文档将其描述为Anchor scroll offset, default asoffsetTop见 组件 API 文档。二、官方示例解读滚动到屏幕正中间仓库中的示例文档 targetOffset.md 只有一句话锚点目标滚动到屏幕正中间Anchor target scroll to screen center。对应的完整实现位于 targetOffset.tsx其核心思路是用一个固定占位块的高度作为偏移量把目标区块推到视口中间。2.1 示例整体结构import React, { useEffect, useState } from react; import { Anchor, Col, Row } from antd; const style: React.CSSProperties { height: 30vh, // 固定块高度视口高度的 30% backgroundColor: rgba(0, 0, 0, 0.85), position: fixed, top: 0, insetInlineStart: 0, width: 75%, color: #fff, }; const App: React.FC () { const topRef React.useRefHTMLDivElement(null); const [targetOffset, setTargetOffset] useStatenumber(); useEffect(() { setTargetOffset(topRef.current?.clientHeight); // 以固定块高度作为偏移量 }, []); return ( div Row Col span{18} div idpart-1 style{{ height: 100vh, background: rgba(255,0,0,0.02), marginTop: 30vh }} Part 1 /div div idpart-2 style{{ height: 100vh, background: rgba(0,255,0,0.02) }} Part 2 /div div idpart-3 style{{ height: 100vh, background: rgba(0,0,255,0.02) }} Part 3 /div /Col Col span{6} Anchor targetOffset{targetOffset} items{[ { key: part-1, href: #part-1, title: Part 1 }, { key: part-2, href: #part-2, title: Part 2 }, { key: part-3, href: #part-3, title: Part 3 }, ]} / /Col /Row div style{style} ref{topRef} divFixed Top Block/div /div /div ); }; export default App;2.2 逐段拆解固定顶部块Fixed Top Block一个position: fixed; top: 0; height: 30vh的黑色占位条模拟真实的吸顶头部。它被ref{topRef}挂载是偏移量的测量基准。动态测量偏移量组件挂载后在useEffect中通过topRef.current?.clientHeight读取固定块的实际像素高度存入targetOffsetstate。使用useStatenumber()初始为undefined而非0是有意为之——undefined表示未设置组件会退回使用offsetTop或0详见下文源码解析。目标区块part-1/2/3三个区块各占100vh其中part-1额外设置了marginTop: 30vh与固定块高度呼应确保演示时偏移效果清晰可见。锚点导航通过items数据配置方式声明三个链接#part-1、#part-2、#part-3并把targetOffset传给Anchor。点击任意锚点后滚动停止位置会预留出30vh的偏移——由于上下各留出等距空间目标区块视觉上正好落在屏幕正中间这就是该示例标题的含义。2.3 关于屏幕正中间的数学解释目标区块高度为100vh视口高度为100vh。当滚动偏移为30vh时目标区块顶部距视口顶部30vh目标区块底部距视口底部100vh - 30vh - 100vh的计算结果对应页面位置正好为30vh区块从偏移处铺满视口剩余高度超出部分在下方滚动区。实际上更通用的居中方式是targetOffset (window.innerHeight - targetHeight) / 2而官方示例采用以固定头高度为偏移的写法既演示了targetOffset的用法也演示了动态测量这一实战技巧——当固定头高度不确定或响应式变化时先测量再赋值是推荐做法。三、源码级原理targetOffset 如何参与滚动计算targetOffset的实现集中在 components/anchor/Anchor.tsx它同时作用于滚动行为与高亮判定两条链路。3.1 属性定义与语义源码第 74-75 行的类型定义给出了最权威的语义/** Scroll to target offset value, if none, its offsetTop prop value or 0. */ targetOffset?: number;即滚动偏移量优先取targetOffset未设置时回退到offsetTopoffsetTop也未设置则按0处理。这一三级回退逻辑在滚动计算与滚动监听中都有体现。3.2 滚动计算handleScrollTo点击锚点链接时最终滚动位置的计算逻辑Anchor.tsx#L246-L272const scrollTop getScroll(container); // 当前滚动位置 const eleOffsetTop getOffsetTop(targetElement, container); // 目标元素距容器顶部的距离 let y scrollTop eleOffsetTop; // 理想滚动位置 y - targetOffset ! undefined ? targetOffset : offsetTop || 0; // 关键扣除偏移量其中getOffsetTopAnchor.tsx#L30-L45通过getBoundingClientRect()计算目标元素位置容器为window时取rect.top减去documentElement.clientTop容器为自定义元素时再减去容器自身的getBoundingClientRect().top。扣减偏移后组件调用 components/_util/scrollTo.ts 完成平滑滚动scrollTo(y, { getContainer: getCurrentContainer, callback() { animating.current false; }, });scrollTo工具函数scrollTo.ts#L15-L39的要点默认时长duration 450毫秒使用easeInOutCubic缓动曲线定义于 components/_util/easings.ts先慢后快再慢通过requestAnimationFrameraf逐帧推进动画结束触发callback支持window、Document与普通HTMLElement三类容器。3.3 高亮判定handleScroll 与 getInternalCurrentAnchortargetOffset同样影响滚动过程中当前激活锚点的判断Anchor.tsx#L232-L244const currentActiveLink getInternalCurrentAnchor( links, targetOffset ! undefined ? targetOffset : offsetTop || 0, bounds, );内部函数getInternalCurrentAnchorAnchor.tsx#L191-L213会遍历所有已注册链接解析href中的#锚点正则/#([\S ])$/计算每个目标元素的top凡是满足top offset bounds的都视为已越过的候选最后取其中top最大者作为激活链接。默认bounds 5提供了少量容差避免元素恰好压线时高亮抖动。3.4 优先级总结场景生效值说明targetOffset已设置targetOffset最高优先级官方推荐仅设置offsetTopoffsetTop兼容旧版用法两者均未设置0默认行为目标贴容器顶部从源码看offsetTop还承担了另一个职责——控制 Anchor 自身的吸顶距离affix模式下传给 Affix 组件见 Anchor.tsx#L355-L361并影响包裹层maxHeightAnchor.tsx#L296-L300。而targetOffset是纯粹的目标滚动偏移两者职责互补这正是 Ant Design 5.x 引入targetOffset的原因。四、与 offsetTop 的区别与协作offsetTop与targetOffset容易混淆结合源码与官方 API 表offsetTopPixels to offset from top when calculating position of scrolltargetOffsetAnchor scroll offset, default asoffsetTop可归纳出下表维度offsetToptargetOffset默认值0-未设置时回退offsetTop或0滚动目标偏移参与作为回退值参与优先值激活锚点判定偏移参与作为回退值参与优先值锚点自身吸顶定位参与传给Affix不参与包裹层maxHeight参与calc(100vh - offsetTop)不参与实践建议当页面有固定头部时通常需要同时设置两者——offsetTop让锚点导航条本身也避开固定头部targetOffset让目标区块滚动到正确位置。而若只关心点哪滚到哪单独使用targetOffset即可。五、单元测试佐证行为可验证仓库的 Anchor.test.tsx 用 Jest 对targetOffset做了精确验证L271-L328测试过程很好地演示了优先级关系it(targetOffset prop, async () { // 目标元素位于 1000px 处 fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000); // 无偏移滚到 1000 setProps({ offsetTop: 100 }); fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900); // offsetTop100滚到 900 setProps({ targetOffset: 200 }); fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800); // targetOffset200滚到 800覆盖 offsetTop });该测试完整复现了targetOffset覆盖offsetTop的优先级链1000 → 900 → 800并覆盖了带空格的 hash#id s p a c e s边界场景见测试 L302-L328。此外demo 快照测试demo.test.tsx.snap也保证了 targetOffset.tsx 渲染结果的稳定性。这些测试文件可作为你验证自身实现的行为基准。六、实战方案把锚点目标精确滚到屏幕中间综合官方示例与源码原理这里给出三个可直接落地的封装模式。6.1 模式一动态测量固定头高度官方示例思路const headerRef React.useRefHTMLDivElement(null); const [targetOffset, setTargetOffset] React.useStatenumber(); React.useEffect(() { // 固定头高度变化时重新测量例如配合 ResizeObserver setTargetOffset(headerRef.current?.clientHeight); }, []); return ( Anchor targetOffset{targetOffset} items{[ { key: section-1, href: #section-1, title: 区块一 }, { key: section-2, href: #section-2, title: 区块二 }, ]} / header ref{headerRef} style{{ position: fixed, top: 0, height: 64 }} {/* 固定头部 */} /header / );要点useStatenumber()初始为undefined挂载测量完成后才传入真实值避免首帧误用0。6.2 模式二精确居中任意目标高度当目标区块高度不固定时可在点击前动态计算使其居中的偏移量const scrollToCenter (targetId: string) { const el document.getElementById(targetId); if (!el) return; const offset Math.max((window.innerHeight - el.offsetHeight) / 2, 0); setTargetOffset(offset); // 将偏移写入 Anchor 后点击对应链接 };注意offset需Math.max(..., 0)防止负数目标高于视口时退回顶部对齐。6.3 模式三仅设置静态偏移固定头部高度确定如 64px时直接常量传入即可无需测量Anchor targetOffset{64} items{[...]} /七、常见问题与注意事项targetOffset与offsetTop同时设置滚动偏移以targetOffset为准offsetTop仍负责锚点自身吸顶定位二者并不冲突。容器是自定义滚动元素时getContainer指定自定义容器后getOffsetTop会换算为相对该容器的偏移targetOffset语义不变见 Anchor.tsx#L38-L41。hash 包含空格源码使用/#([\S ])$/解析测试用例已覆盖#id s p a c e s场景正常使用无需转义。动画期间的高亮抑制滚动动画进行中animating.current truehandleScroll会直接返回Anchor.tsx#L232-L235避免中途反复切换高亮。items与children写法5.1.0 起推荐items数据化配置Anchor.Link的 JSX 子组件写法已被标记 deprecated源码中通过warning.deprecated(!children, Anchor children, items)提示见 Anchor.tsx#L129-L140。结语targetOffset是 Ant Design Anchor 组件处理固定头遮挡问题的关键配置。通过 targetOffset 示例 的动态测量固定块高度这一巧妙手法配合 Anchor.tsx 中targetOffset→offsetTop→0的三级回退逻辑以及 scrollTo.ts 提供的 450ms 缓动滚动你可以用极少的代码实现目标区块精确滚动到屏幕正中间这类常见交互需求。文中提供的三种实战模式与单元测试佐证可帮助你根据固定头高度是否确定、目标区块高度是否可预期等不同场景选择最合适的落地方式。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Anchor 组件 targetOffset 详解：精确控制锚点滚动偏移与居中定位
Ant Design Anchor 组件 targetOffset 详解精确控制锚点滚动偏移与居中定位【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 的 Anchor锚点组件中targetOffset用于精确控制点击锚点链接后的滚动偏移量让目标区块的定位不受固定头部Fixed Header、吸顶导航等遮挡元素的影响。本文以仓库中的 targetOffset 官方示例 为骨架结合 Anchor 组件源码、滚动工具函数 与单元测试系统讲解targetOffset的作用原理、与offsetTop的优先级关系并给出可直接复用的完整实现方案。读完本文你将能够通过一行配置让锚点目标精确滚动到屏幕任意位置包括屏幕正中间。一、场景引入为什么锚点需要滚动偏移锚点的核心能力是点击导航滚动到页面中对应区块。但在真实业务页面中目标区块往往会被以下元素遮挡页面上方固定的全局导航栏 / 顶部工具栏吸顶的筛选条、搜索框演示页面中固定position: fixed的占位区块。如果不做任何偏移处理点击锚点后目标区块顶部会躲到这些固定元素下面首屏看到的不是区块内容而是被遮挡的空白。targetOffset就是为此设计的修正量——它决定滚动停止时目标区块顶部与滚动容器顶部之间保留的距离。注意targetOffset是 Ant Design 5.x 之后推荐的滚动偏移方案官方文档将其描述为Anchor scroll offset, default asoffsetTop见 组件 API 文档。二、官方示例解读滚动到屏幕正中间仓库中的示例文档 targetOffset.md 只有一句话锚点目标滚动到屏幕正中间Anchor target scroll to screen center。对应的完整实现位于 targetOffset.tsx其核心思路是用一个固定占位块的高度作为偏移量把目标区块推到视口中间。2.1 示例整体结构import React, { useEffect, useState } from react; import { Anchor, Col, Row } from antd; const style: React.CSSProperties { height: 30vh, // 固定块高度视口高度的 30% backgroundColor: rgba(0, 0, 0, 0.85), position: fixed, top: 0, insetInlineStart: 0, width: 75%, color: #fff, }; const App: React.FC () { const topRef React.useRefHTMLDivElement(null); const [targetOffset, setTargetOffset] useStatenumber(); useEffect(() { setTargetOffset(topRef.current?.clientHeight); // 以固定块高度作为偏移量 }, []); return ( div Row Col span{18} div idpart-1 style{{ height: 100vh, background: rgba(255,0,0,0.02), marginTop: 30vh }} Part 1 /div div idpart-2 style{{ height: 100vh, background: rgba(0,255,0,0.02) }} Part 2 /div div idpart-3 style{{ height: 100vh, background: rgba(0,0,255,0.02) }} Part 3 /div /Col Col span{6} Anchor targetOffset{targetOffset} items{[ { key: part-1, href: #part-1, title: Part 1 }, { key: part-2, href: #part-2, title: Part 2 }, { key: part-3, href: #part-3, title: Part 3 }, ]} / /Col /Row div style{style} ref{topRef} divFixed Top Block/div /div /div ); }; export default App;2.2 逐段拆解固定顶部块Fixed Top Block一个position: fixed; top: 0; height: 30vh的黑色占位条模拟真实的吸顶头部。它被ref{topRef}挂载是偏移量的测量基准。动态测量偏移量组件挂载后在useEffect中通过topRef.current?.clientHeight读取固定块的实际像素高度存入targetOffsetstate。使用useStatenumber()初始为undefined而非0是有意为之——undefined表示未设置组件会退回使用offsetTop或0详见下文源码解析。目标区块part-1/2/3三个区块各占100vh其中part-1额外设置了marginTop: 30vh与固定块高度呼应确保演示时偏移效果清晰可见。锚点导航通过items数据配置方式声明三个链接#part-1、#part-2、#part-3并把targetOffset传给Anchor。点击任意锚点后滚动停止位置会预留出30vh的偏移——由于上下各留出等距空间目标区块视觉上正好落在屏幕正中间这就是该示例标题的含义。2.3 关于屏幕正中间的数学解释目标区块高度为100vh视口高度为100vh。当滚动偏移为30vh时目标区块顶部距视口顶部30vh目标区块底部距视口底部100vh - 30vh - 100vh的计算结果对应页面位置正好为30vh区块从偏移处铺满视口剩余高度超出部分在下方滚动区。实际上更通用的居中方式是targetOffset (window.innerHeight - targetHeight) / 2而官方示例采用以固定头高度为偏移的写法既演示了targetOffset的用法也演示了动态测量这一实战技巧——当固定头高度不确定或响应式变化时先测量再赋值是推荐做法。三、源码级原理targetOffset 如何参与滚动计算targetOffset的实现集中在 components/anchor/Anchor.tsx它同时作用于滚动行为与高亮判定两条链路。3.1 属性定义与语义源码第 74-75 行的类型定义给出了最权威的语义/** Scroll to target offset value, if none, its offsetTop prop value or 0. */ targetOffset?: number;即滚动偏移量优先取targetOffset未设置时回退到offsetTopoffsetTop也未设置则按0处理。这一三级回退逻辑在滚动计算与滚动监听中都有体现。3.2 滚动计算handleScrollTo点击锚点链接时最终滚动位置的计算逻辑Anchor.tsx#L246-L272const scrollTop getScroll(container); // 当前滚动位置 const eleOffsetTop getOffsetTop(targetElement, container); // 目标元素距容器顶部的距离 let y scrollTop eleOffsetTop; // 理想滚动位置 y - targetOffset ! undefined ? targetOffset : offsetTop || 0; // 关键扣除偏移量其中getOffsetTopAnchor.tsx#L30-L45通过getBoundingClientRect()计算目标元素位置容器为window时取rect.top减去documentElement.clientTop容器为自定义元素时再减去容器自身的getBoundingClientRect().top。扣减偏移后组件调用 components/_util/scrollTo.ts 完成平滑滚动scrollTo(y, { getContainer: getCurrentContainer, callback() { animating.current false; }, });scrollTo工具函数scrollTo.ts#L15-L39的要点默认时长duration 450毫秒使用easeInOutCubic缓动曲线定义于 components/_util/easings.ts先慢后快再慢通过requestAnimationFrameraf逐帧推进动画结束触发callback支持window、Document与普通HTMLElement三类容器。3.3 高亮判定handleScroll 与 getInternalCurrentAnchortargetOffset同样影响滚动过程中当前激活锚点的判断Anchor.tsx#L232-L244const currentActiveLink getInternalCurrentAnchor( links, targetOffset ! undefined ? targetOffset : offsetTop || 0, bounds, );内部函数getInternalCurrentAnchorAnchor.tsx#L191-L213会遍历所有已注册链接解析href中的#锚点正则/#([\S ])$/计算每个目标元素的top凡是满足top offset bounds的都视为已越过的候选最后取其中top最大者作为激活链接。默认bounds 5提供了少量容差避免元素恰好压线时高亮抖动。3.4 优先级总结场景生效值说明targetOffset已设置targetOffset最高优先级官方推荐仅设置offsetTopoffsetTop兼容旧版用法两者均未设置0默认行为目标贴容器顶部从源码看offsetTop还承担了另一个职责——控制 Anchor 自身的吸顶距离affix模式下传给 Affix 组件见 Anchor.tsx#L355-L361并影响包裹层maxHeightAnchor.tsx#L296-L300。而targetOffset是纯粹的目标滚动偏移两者职责互补这正是 Ant Design 5.x 引入targetOffset的原因。四、与 offsetTop 的区别与协作offsetTop与targetOffset容易混淆结合源码与官方 API 表offsetTopPixels to offset from top when calculating position of scrolltargetOffsetAnchor scroll offset, default asoffsetTop可归纳出下表维度offsetToptargetOffset默认值0-未设置时回退offsetTop或0滚动目标偏移参与作为回退值参与优先值激活锚点判定偏移参与作为回退值参与优先值锚点自身吸顶定位参与传给Affix不参与包裹层maxHeight参与calc(100vh - offsetTop)不参与实践建议当页面有固定头部时通常需要同时设置两者——offsetTop让锚点导航条本身也避开固定头部targetOffset让目标区块滚动到正确位置。而若只关心点哪滚到哪单独使用targetOffset即可。五、单元测试佐证行为可验证仓库的 Anchor.test.tsx 用 Jest 对targetOffset做了精确验证L271-L328测试过程很好地演示了优先级关系it(targetOffset prop, async () { // 目标元素位于 1000px 处 fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000); // 无偏移滚到 1000 setProps({ offsetTop: 100 }); fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900); // offsetTop100滚到 900 setProps({ targetOffset: 200 }); fireEvent.click(container.querySelector(a[href#${hash}])!); await waitFakeTimer(); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800); // targetOffset200滚到 800覆盖 offsetTop });该测试完整复现了targetOffset覆盖offsetTop的优先级链1000 → 900 → 800并覆盖了带空格的 hash#id s p a c e s边界场景见测试 L302-L328。此外demo 快照测试demo.test.tsx.snap也保证了 targetOffset.tsx 渲染结果的稳定性。这些测试文件可作为你验证自身实现的行为基准。六、实战方案把锚点目标精确滚到屏幕中间综合官方示例与源码原理这里给出三个可直接落地的封装模式。6.1 模式一动态测量固定头高度官方示例思路const headerRef React.useRefHTMLDivElement(null); const [targetOffset, setTargetOffset] React.useStatenumber(); React.useEffect(() { // 固定头高度变化时重新测量例如配合 ResizeObserver setTargetOffset(headerRef.current?.clientHeight); }, []); return ( Anchor targetOffset{targetOffset} items{[ { key: section-1, href: #section-1, title: 区块一 }, { key: section-2, href: #section-2, title: 区块二 }, ]} / header ref{headerRef} style{{ position: fixed, top: 0, height: 64 }} {/* 固定头部 */} /header / );要点useStatenumber()初始为undefined挂载测量完成后才传入真实值避免首帧误用0。6.2 模式二精确居中任意目标高度当目标区块高度不固定时可在点击前动态计算使其居中的偏移量const scrollToCenter (targetId: string) { const el document.getElementById(targetId); if (!el) return; const offset Math.max((window.innerHeight - el.offsetHeight) / 2, 0); setTargetOffset(offset); // 将偏移写入 Anchor 后点击对应链接 };注意offset需Math.max(..., 0)防止负数目标高于视口时退回顶部对齐。6.3 模式三仅设置静态偏移固定头部高度确定如 64px时直接常量传入即可无需测量Anchor targetOffset{64} items{[...]} /七、常见问题与注意事项targetOffset与offsetTop同时设置滚动偏移以targetOffset为准offsetTop仍负责锚点自身吸顶定位二者并不冲突。容器是自定义滚动元素时getContainer指定自定义容器后getOffsetTop会换算为相对该容器的偏移targetOffset语义不变见 Anchor.tsx#L38-L41。hash 包含空格源码使用/#([\S ])$/解析测试用例已覆盖#id s p a c e s场景正常使用无需转义。动画期间的高亮抑制滚动动画进行中animating.current truehandleScroll会直接返回Anchor.tsx#L232-L235避免中途反复切换高亮。items与children写法5.1.0 起推荐items数据化配置Anchor.Link的 JSX 子组件写法已被标记 deprecated源码中通过warning.deprecated(!children, Anchor children, items)提示见 Anchor.tsx#L129-L140。结语targetOffset是 Ant Design Anchor 组件处理固定头遮挡问题的关键配置。通过 targetOffset 示例 的动态测量固定块高度这一巧妙手法配合 Anchor.tsx 中targetOffset→offsetTop→0的三级回退逻辑以及 scrollTo.ts 提供的 450ms 缓动滚动你可以用极少的代码实现目标区块精确滚动到屏幕正中间这类常见交互需求。文中提供的三种实战模式与单元测试佐证可帮助你根据固定头高度是否确定、目标区块高度是否可预期等不同场景选择最合适的落地方式。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考