apps/docs/content/docs/cn/react/releases/v3-0-0-beta-4.mdx
此版本引入了用于可视化主题定制的全新 主题构建器，三个新组件（Autocomplete、Breadcrumbs、Toast），为 Tabs 添加 secondary 变体，为 Input 与 InputGroup 添加 primary / secondary 变体，InputGroup 新增对 TextArea 的支持，以及 ⚠️ 破坏性变更：移除 Link 的下划线变体，并从表单组件中移除 isInSurface prop。
<DocsImage src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" alt="HeroUI v3 Beta 4" href="/docs/changelog/v3-0-0-beta-4" />
升级到最新版本：
<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
<Tab value="npm">
bash npm i @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="pnpm">
bash pnpm add @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="yarn">
bash yarn add @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="bun">
bash bun add @heroui/styles@beta @heroui/react@beta
</Tab>
</Tabs>
我们很高兴推出 主题构建器 —— 用于创建与定制 HeroUI 主题的强大可视化工具。可在实时预览中构建你专属的主题，并导出可直接使用的 CSS。
主要特性：
立即在 v3.heroui.com/themes 上试用。
本次发布共引入 3 个 新的基础组件：
<ComponentPreview name="autocomplete-default" />
<ComponentPreview name="breadcrumbs-basic" />
<ComponentPreview name="toast-variants" />
为 Tabs 新增 secondary 变体，使用下划线指示器样式。该变体同时支持水平与垂直方向。
<ComponentPreview name="tabs-secondary" />
用法：
<Tabs variant="secondary">
<Tabs.ListContainer>
<Tabs.List aria-label="Options">
<Tabs.Tab id="overview">
Overview
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="analytics">
Analytics
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel id="overview">Content</Tabs.Panel>
<Tabs.Panel id="analytics">Content</Tabs.Panel>
</Tabs>
为 Input 组件新增 primary 与 secondary 变体：
primary（默认）：带阴影的标准样式，适用于大多数场景secondary：不带阴影的低调变体，适合在 Surface 组件内部使用<ComponentPreview name="input-variants" />
InputGroup 组件获得多项改进：
TextArea 支持：可使用 InputGroup.TextArea 来构建带有 prefix 与 suffix 的多行文本输入。
<ComponentPreview name="input-group-with-textarea" />
变体：新增与 Input 组件相匹配的 primary 与 secondary 变体。
<ComponentPreview name="input-group-variants" />
为 Button 与 ButtonGroup 同时新增 outline 变体，用于呈现描边样式。
<ComponentPreview name="button-outline-variant" />
为 AlertDialog 组件新增尺寸支持，让你可以控制对话框的大小。
<ComponentPreview name="alert-dialog-sizes" />
为 Checkbox 提供更快的动画与更粗的描边宽度，反馈更明显。
<ComponentPreview name="checkbox-basic" />
Link 组件现在使用 Tailwind CSS 类来设置文本装饰，而不再依赖内置变体。这样既更灵活，也更贴合 Tailwind 的使用习惯。
可用的 Tailwind 工具类：
underline —— 始终显示下划线no-underline —— 移除下划线hover:underline —— 仅在悬停时显示下划线decoration-primary、decoration-secondary 等 —— 设置下划线颜色decoration-1、decoration-2、decoration-4 —— 控制下划线粗细underline-offset-1、underline-offset-2 等 —— 调整下划线偏移<ComponentPreview name="link-underline-and-offset" />
Link 组件内置的 underline 与 underlineOffset prop 已被移除。请改用 Tailwind CSS 类来控制文本装饰。
之前：
<Link href="#" underline="hover" underlineOffset={4}>
Link text
</Link>
之后：
<Link href="#" className="hover:underline underline-offset-4">
Link text
</Link>
可用的 Tailwind 类：
underline、no-underline、hover:underline —— 装饰线decoration-primary、decoration-muted 等 —— 装饰线颜色decoration-solid、decoration-dashed、decoration-dotted —— 装饰线样式decoration-1、decoration-2、decoration-4 —— 装饰线粗细underline-offset-1、underline-offset-2、underline-offset-4 —— 下划线偏移详见 Link 文档。
isInSurface propisInSurface prop 以及自动 surface 检测已从基于表单的组件中移除。当你将表单组件放置在 Surface、Card 或其他基于 Surface 的容器中时，请改用 variant="secondary"。
之前：
<Surface>
<Input isInSurface />
</Surface>
之后：
<Surface>
<Input variant="secondary" />
</Surface>
受影响的组件：
secondary 变体提供不带阴影的低调样式，更适合在 surface 背景上使用。
:not(:focus)，避免与 hover 状态冲突BUTTON_GROUP_CHILD 重新导出的类型声明HeroUI 现在直接从 react-aria-components 重新导出了一系列基元与工具，方便你访问。这些导出对于 React Aria 框架配置 尤其有用。
Provider：
RouterProvider —— 配置 React Aria 的 Link 使用客户端路由器I18nProvider —— 设置 React Aria Components 使用的 localeHook 与工具：
isRTL —— 检查某个 locale 是否为从右到左useLocale —— 访问当前 locale 与方向useFilter —— 对集合进行过滤与排序组件：
Collection —— 用于管理列表的集合组件ListBoxLoadMoreItem —— 用于加载更多条目的 ListBox 项国际化工具：
getLocalizationScript —— 获取用于服务端渲染的本地化脚本（来自 react-aria-components/i18n）以上这些都可以直接从 @heroui/react 引入：
import {
RouterProvider,
I18nProvider,
isRTL,
useLocale,
useFilter,
getLocalizationScript
} from "@heroui/react";
感谢每一位为本次发布做出贡献的开发者！
<PRContributors />