勇哥最近在做一个 AI 对话项目,前端选型用了 shadcn/ui,shadcn/ui 开源且设计精美,粘贴复制到项目中即可使用。最近又新出了 Sidebar 组件,可以快速构建出类似豆包等 AI 平台 AI 对话效果。
开干,一顿操作猛于虎,直接下载官方预设的 block 到应用中:
npx shadcn@latest add sidebar-01
开 dev 模式预览效果,PC 端效果完美,就差对接后端接口了。切换到 moble 模式,点击切换侧边栏,鲜红的 Console Error 映入眼帘:
DialogContent
requires aDialogTitle
for the component to be accessible for screen reader users.If you want to hide theDialogTitle
, you can wrap it with our
VisuallyHidden component. For more information, see https://radix-ui.com/primitives/docs/components/dialog
先说解决办法:
- 找到 Sidebar 组件源代码:components/ui/sidebar.tsx
- 找到 Sidebar 定义的 isMobile 判断部分
在 <SheetContent />
组件中添加 <SheetHeader/>
,具体如下:
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
{/* 此处代码显示省略... */}
>
{/* 添加以下代码 */}
<SheetHeader className="sr-only">
<SheetTitle>Sidebar</SheetTitle>
<SheetDescription></SheetDescription>
</SheetHeader>
{/* 添加代码结束 */}
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
)
}
再说产生的原因:
- shadcn/ui 的 Sidebar 组件在 mobile 模式下会用到 Sheet 组件
- shadcn/ui 的 Sheet 组件依赖 radix-ui 的 dialog 组件
- radix-ui 的 dialog 组件要求 DialogContent 必需
套娃了属于是。
文中提到的资源如下:
- shadcn/ui 项目官网:https://ui.shadcn.com/
- 代码仓库:https://github.com/shadcn-ui/ui
- shadcn/ui Sidebar 组件使用: