NTEye 组件库

这是一套对齐 macOS 26 Tahoe「Liquid Glass」设计语言的通用 Web 组件库:纯 HTML + Tailwind 类,不绑定任何框架,可整段复制进 Web / 桌面壳工程。文档按「用途 / 设计规范 / 状态与交互 / 参考实现」组织,规范锚定 macOS 26/27 HIG。

NTEye(面向《异环》的抽卡记录 OCR 工具)是它的参考消费者,存在双向同步约定:

• NTEye 的 frontend/src/shared/components/ 下的 Vue 组件逐字引用此处类名(PillButton / RoundIconButton / IconButtonGroup / SwitchToggle / TextInput / SegSlider / BadgeTag / GlassShell),改类名须双向同步并回归各窗口。
• NTEye 的 nteye/ui/mac/ 以 AppKit 原生控件实现同一设计(NSToolbarItemGroup、NSToolbarItemStyleProminent、NSSplitViewItem 侧栏等),本库即其 Web 拟态。

使用方式

每个组件页提供预览 / 代码切换:预览即真实样式(支持明暗主题,跟随右上角主题切换);代码面板的 HTML 可直接复制进生产工程。类名即生产样式,严禁随手改动。

分类

• 排版 / Typography — 标题、子标题、正文
• 按钮 / Buttons — 胶囊按钮、圆形图标按钮、按钮组
• 表单 / Forms — switch 开关、输入框、分段选择器
• 导航 / Navigation — 侧边栏、悬浮按钮组
• 数据展示 / Data Display — 选择列表、徽章标签
• 反馈 / Feedback — 对话框