梧桐设计语言v0.4.1

侧栏Sidebar

侧栏:background 灰底,宽 224,顶部工作区切换,下面按分组列导航。选中态是白块浮起来——card 底 + shadow-raised + radius-sm,不用彩色底、不用左侧色条。hover 用 accent


  • 分组小标题「现场」「知识」:meta + muted-foreground,不加粗、不拉间距、不全大写。
  • 每项高 32,图标 14px 线性,文字 13px。右侧可挂计数(meta 色)或「NEW」小标(chip 尺寸,accent 底)。
  • 快捷操作、AI 助手、通知固定在分组之上。
  • 底部是当前用户:首字圆头像 + 名字。
  • 移动端不用侧栏,改底部 tab 或抽屉。

消费者提供:分组与项、当前选中项、计数。

示例

import
import { Sidebar, SidebarWorkspace, SidebarGroup, SidebarItem, SidebarUser } from "@wutong/ui";

侧栏

灰底;选中态是白块浮起来,不用彩色底、不用左侧色条

API

属性类型默认说明
SidebarItem.activeboolean选中态(aria-current=page)
SidebarItem.count / isNewnumber / boolean右侧计数或 NEW 小标
SidebarItem.hrefstring传了渲染 <a>,否则 <button>