小工具

这些是给内容站用的小工具，不是 shadcn 那套基础组件。

LanguageToggle 和 SocialLinks 适合放进 LayoutHeader。本站已经挂了 ScrollToTop。

适用场景

通用图标仍从 lucide-react 引入，见图标。品牌图标只放在 SocialLink 里。

单个 option 渲染按钮，数组渲染下拉。路由由你自己处理：在每个 option 上传 onClick。

语言切换

LanguageToggle

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

带前置图标的搜索样式输入框。它本身不会执行查询。

搜索框

SearchInput

属性	类型	默认值	说明
`placeholder`	`string`	`"Search..."`	原生 input placeholder。
`inputRef`	`RefObject<HTMLInputElement>`	—	内部 input 的 ref。
`inputClassName`	`string`	—	内部 input 的 class。
`searchIconClassName`	`string`	—	搜索图标的 class。

SocialLink

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

固定在视口右下角。图标按钮必须有无障碍名称。

回到顶部

ScrollToTop

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

排版

Body copy for a content page.

Heading

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

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

外部链接

命令面板对话框用的组件。useQuickSearchState 会监听 ⌘K / Ctrl+K。下面的预览用本地 state，避免抢走本站快捷键。

快速搜索