小工具

按职责组合小工具：语言和主题控件放在页头，搜索组件负责输入查询，ScrollToTop 放在长内容页。路由跳转和搜索索引逻辑仍由应用接入。

语言切换、搜索入口、社交链接和回到顶部是内容站常用的功能。Blackwork 将这些功能做成独立组件，可以按页面需要组合。

例如，LanguageToggle 和 SocialLinks 可以放进 LayoutHeader，ScrollToTop 则放在页面中供长文阅读时使用。

适用场景

通用图标使用 lucide-react，见图标。Blackwork 内置的品牌图标通过 SocialLink 使用。

options 传入单个选项时显示按钮，传入数组时显示下拉菜单。语言切换后的路由跳转由应用处理，在各选项的 onClick 中配置即可。

语言切换

LanguageToggle

属性	类型	默认值	说明
`options`必填	`LanguageToggleOption \| LanguageToggleOption[]`	—	传入单个选项时显示按钮，传入数组时显示下拉菜单。
`defaultValue`	`string`	—	当前语言，用于选择触发器图标。
`title`	`string`	—	触发按钮的提示文字。
`ariaLabel`	`string`	—	无障碍名称，默认使用 title。

SearchInput 提供带搜索图标的输入框样式，查询、提交或过滤逻辑由应用接入。

搜索框

SearchInput

属性	类型	默认值	说明
`placeholder`	`string`	`"Search..."`	输入框的占位文字。
`inputRef`	`RefObject<HTMLInputElement>`	—	内部 input 的 ref。
`inputClassName`	`string`	—	内部 input 元素的类名。
`searchIconClassName`	`string`	—	搜索图标的类名。

SocialLink

属性	类型	默认值	说明
`type`必填	`"github" \| "x" \| "twitter" \| "instagram" \| "zhihu" \| "rss"`	—	内置品牌图标，其他类型不会显示内容。
`link`必填	`string`	—	目标 URL，会在新标签页打开。
`label`	`string`	—	提示文字，默认使用品牌名称。
`ariaLabel`	`string`	—	无障碍名称，默认是 Visit {label} in a new tab。

ScrollToTop 默认固定在视口右下角。使用时设置 ariaLabel，为图标按钮提供无障碍名称。

回到顶部

ScrollToTop

Heading 的 level 对应 h1–h4。Paragraph 是配套的正文样式。

排版

Body copy for a content page.

Heading

属性	类型	默认值	说明
`level`	`1 \| 2 \| 3 \| 4`	`1`	显示 h1 至 h4，并使用对应的字号层级。

ExternalLink 在新标签页打开链接，并带上 rel="nofollow noopener noreferrer"。

外部链接

QuickSearchDialog 等组件用于组合搜索对话框，useQuickSearchState 支持通过 ⌘K / Ctrl+K 切换打开状态。本站页头搜索也使用这组组件。下面的预览通过按钮控制打开状态，避免与本站的搜索快捷键冲突。

快速搜索

玻璃页头中的控件设置 variant="glass"；页头材质和快捷搜索弹窗的用法见液态玻璃。