# ryOS UI 设计和样式 ## 4 个主题主题 |身份证 |主要特征 ---|---|--- 系统7 | `系统7` |黑/白、方角、Chicago 字体、点状图案 macOS Aqua | `macosx` |细条纹、交通灯、光泽纽扣、Lucida Grande Windows XP | `xp` |蓝色渐变、Luna 风格、柔和阴影、Tahoma 视窗 98 | `win98` |灰色 3D 斜角、经典蓝色标题栏、MS Sans Serif ## 基本实用程序从“@/lib/utils”导入{cn}；从“@/contexts/ThemeContext”导入{useTheme}； const { osTheme } = useTheme(); // 主题条件类类名={cn( “基类”， osTheme === "macosx" && "aqua-specific", osTheme ===“system7”&&“system7 特定” )} ## 操作系统感知的 Tailwind 类 className="bg-os-window-bg" // 窗口背景 className="border-os-window" // 窗口边框 className="rounded-os" // 适合主题的半径 className="font-os-ui" // UI 字体堆栈 className="font-os-mono" // 等宽字体 className="shadow-os-window" // 窗口阴影 className="h-os-titlebar" // 标题栏高度 ## CSS 变量通过 `var(--name)` 访问： --os-font-ui, --os-font-mono --os-color-window-bg, --os-color-window-border --os-color-titlebar-active-bg, --os-color-titlebar-inactive-bg --os-color-button-face, --os-color-button-highlight, --os-color-button-shadow --os-颜色选择-bg，--os-颜色选择-文本 --os-metrics-边框宽度，--os-metrics-半径 --os-metrics-标题栏-高度，--os-metrics-菜单栏高度 ** ** ## 特定主题的样式 ### 系统7

### macOS Aqua

### Windows XP

### Windows 98

** ** ## 主题规范 ### 系统 7 (`system7`) 物业 |价值 ---|--- 字体|芝加哥、摩纳哥（单声道）窗口背景| `#FFFFFF` 边境| `2px实心#000000` 半径 | `0 像素` 选择|黑色背景，白色文字影子| `2px 2px 0px 0px rgba(0,0,0,0.5)` ### macOS Aqua (`macosx`) 物业 |价值 ---|--- 字体|摩纳哥露西达格兰德（单声道）窗口背景| `#E8E8E8` 边境| `0.5px 实心 rgba(0,0,0,0.3)` 半径 | `0.45rem` (8px) 选择| `#3875D7` bg，白色文本影子| `0 3px 10px rgba(0,0,0,0.3)` 交通灯|红色`#FF5F57`，黄色`#FEBC2E`，绿色`#28C840` ### Windows XP (`xp`) 物业 |价值 ---|--- 字体|塔霍马、康索拉斯（单声道）窗口背景| `#ECE9D8` 边境| `3px实心#0054E3` 半径| `0.5rem` (8px) 选择| `#316AC5`背景，白色文本影子| `0 4px 8px rgba(0,0,0,0.25)` 标题栏|蓝色渐变`#0A246A`→`#0054E3` ### Windows 98 (`win98`) 物业 |价值 ---|--- 字体| MS Sans Serif、Fixedsys（单色）窗口背景| `#C0C0C0` 凸起斜角| `边框：2px实线；边框颜色：#FFF #808080 #808080 #FFF` 下沉斜角| `边框：2px实线；边框颜色：#808080 #FFF #FFF #808080` 半径 | `0 像素` 选择| `#000080`背景，白色文本标题栏|渐变“#000080”→“#1084D0” ** ** ## 组件模式 ### 主题自适应按钮从“@/components/ui/button”导入{Button}； <按钮变体=“默认”>标准复古风格 Aqua (macOS) ### Aqua 按钮（CSS 类） ### Win98 3D 按钮 <按钮类名={cn( “px-4 py-1 bg-[#C0C0C0]”， “边框-2 边框-t-白色边框-l-白色”， "边框-b-[#808080] 边框-r-[#808080]", “活动：边框-t-[#808080] 活动：边框-l-[#808080]”， “活动：边框-b-白色活动：边框-r-白色” )}> ### 玻璃晶态

### 主题感知面板

** ** ## 自定义组件组件|用途 ---|--- `AudioBars` |频率可视化 `播放栏` |均衡器动画 `音量栏` |水平音量指示器 `拨号` |圆形旋钮控制（sm/md/lg） `右键菜单` |上下文菜单包装器 ### 拨号示例从“@/components/ui/dial”导入{拨号}； <拨号值={50} onChange={setValue} size="md" label="音量" /> ** ** ## 窗户材料模式|使用案例 ---|--- `默认` |标准不透明窗户 `透明` |半透明（iPod、Photo Booth） `notitlebar` |沉浸式浮动控件（视频） ** ** ## 最佳实践 1. **在创建新样式或组件之前始终搜索现有模式** 2. **始终使用`cn()`**进行条件类合并 3. **使用操作系统感知类**（`bg-os-*`、`border-os-*`）（如果可用） 4. **使用`useTheme()`检查主题以进行复杂的条件渲染 5. **优先使用 CSS 变量** 而不是硬编码颜色 6. **添加样式组件时测试所有 4 个主题** x

用户界面设计风格

包含技能