侧边栏

用途

双栏窗口左侧的列表面板,承载条目导航;行内容由使用方自绘,可自由组合图标、染色文字、pill 徽章与状态圆点。用例参考:复核窗条目列表、更新字典窗词条列表(即本例)。

设计规范 · macOS 26 / 27

• macOS 26 Tahoe 的悬浮玻璃侧栏:与窗缘留 12px 内缩、rounded-2xl(16px)与窗口圆角同心、白 / 黑 70% 半透明底 + backdrop-blur,浮于内容层之上、内容可从其下滚过——即 NSSplitViewItem.sidebarWithViewController 的原生形态。
• 注:macOS 27 Golden Gate 已把系统侧栏改回边到边贴齐以减少阴影占位;本库保持 Tahoe 悬浮形态,与 mac 端实现一致。
• 行高 34px、圆角行;「新」pill 用 systemGreen 语义透明底 + 深绿文字,「已存在」用中性灰——状态色语义与「徽章标签」同源。
• 行尾可缀状态圆点(size-2.5 rounded-full):绿 rgb(40,205,65)(systemGreen)/ 红 rgb(255,59,48)(systemRed),标示逐行校验结果。

状态与交互(参考实现扩展)

• 宽度可拖 180–360px(默认 260,右缘不可见 8px 分隔条);显隐 220ms(-translate-x + opacity,内容区 padding 同步过渡)。
• 行无 hover / 按压瞬时高亮——同 macOS 原生侧栏,选中即唯一高亮:点击后持久保持 bg-black/8 / 暗 white/12。预览可点击切换选中,演示状态机提供 value / setValue。
• 底色可经变量间接取值(参考实现用 --sidebar-bg)以支持宿主的透明材质态(如 Win11 亚克力);明 / 暗取值与本例 bg-white/70、dark:bg-black/70 一致。

参考实现

Web 参考:GlassShell.vue(侧栏容器 + 拖宽分隔条 + 顶部工具栏插槽,行经 #sidebar 插槽自绘);原生对应 NSSplitViewItem.sidebarWithViewController(mac 端 build_two_column_window())。