# 圆角设计规范 (Corner Radius Design System)

> 基于小米澎湃OS 3 (HyperOS) 设计语言

## 设计理念

澎湃OS 3 采用**"生命感美学"**设计语言，强调：
- **全局圆角设计** - 所有界面元素均采用圆角
- **视觉舒适统一** - 柔和、现代、细腻
- **多级渲染** - 配合模糊混色与阴影
- **层级分明** - 大容器使用大圆角，小元素使用小圆角

## 圆角数值体系

### 核心数值

| 级别 | 圆角值 (px) | 用途 |
|------|-------------|------|
| **Level 0** | 0 | 特殊场景（无圆角需求） |
| **Level 1** | 12 | 小元素、图标内边角、ListBoxItem |
| **Level 2** | 16 | 色块按钮、小组件 |
| **Level 3** | 20 | 普通按钮、组件预览 |
| **Level 4** | 24 | 输入框、小型面板 |
| **Level 5** | 28 | 面板/卡片 (glass-panel) |
| **Level 6** | 32 | Mica 风格面板 (mica-strong) |
| **Level 7** | 36 | 大容器 (glass-strong)、任务栏、窗口 |

### 动态圆角

动态圆角根据格子大小（cellSize）动态计算：

```csharp
// 小元素
CornerRadius = Math.Clamp(cellSize * 0.35, 16, 28);

// 小组件
CornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);

// 大容器（任务栏/窗口）
CornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);
```

**系数参考**：
- 系数范围：`0.35 - 0.45`
- 最小值限制：`12 - 24 px`
- 最大值限制：`28 - 44 px`

## 组件圆角速查表

### 基础控件

| 控件 | 圆角值 | 代码位置 |
|------|--------|---------|
| Button | 20px | GlassModule.axaml |
| ToggleSwitch | 继承系统 | - |
| TextBox | 20px | glass-panel |
| ComboBox | 20px | glass-panel |
| NumberBox | 20px | glass-panel |

### 容器样式类

| 样式类 | 圆角值 | 说明 |
|--------|--------|------|
| `.glass-panel` | 28px | 普通玻璃面板 |
| `.glass-strong` | 36px | 加强玻璃面板（任务栏） |
| `.mica-strong` | 36px | Mica 风格面板（设置页） |
| `.glass-overlay` | 0px | 覆盖层（无圆角） |

### 特殊场景

| 场景 | 圆角值 | 说明 |
|------|--------|------|
| 窗口整体 | 36px | 组件库/设置窗口 |
| 窗口标题栏 | 36px | 仅顶部圆角 (`36,36,0,0`) |
| 颜色选择器色块 | 12px | Monet 颜色/推荐色 |
| 设置页 ListBoxItem | 12px | 导航项 |
| 预览视口 | 12-16px | 壁纸/网格预览 |

## 圆角层级视觉示例

```
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Level 7: 大容器 (36px)                                       │
│   ┌───────────────────────────────────────────────────────────┐ │
│   │                                                           │ │
│   │   Level 6: Mica 面板 (36px)                              │ │
│   │   ┌─────────────────────────────────────────────────────┐ │ │
│   │   │                                                     │ │ │
│   │   │   Level 5: 玻璃面板 (28px)                         │ │ │
│   │   │   ┌─────────────────────────────────────────────┐  │ │ │
│   │   │   │                                             │  │ │ │
│   │   │   │   Level 4: 输入面板 (24px)                  │  │ │ │
│   │   │   │   ┌─────────────────────────────────────┐   │  │ │ │
│   │   │   │   │                                     │   │  │ │ │
│   │   │   │   │   Level 3: 按钮 (20px)             │   │  │ │ │
│   │   │   │   │   ┌─────────────────────────────┐   │   │  │ │ │
│   │   │   │   │   │ Level 2: 色块 (16px)       │   │   │  │ │ │
│   │   │   │   │   │ ┌─────────────────────┐   │   │   │  │ │ │
│   │   │   │   │   │ │ Level 1: 小元素    │   │   │   │  │ │ │
│   │   │   │   │   │ │      (12px)        │   │   │   │  │ │ │
│   │   │   │   │   │ └─────────────────────┘   │   │   │  │ │ │
│   │   │   │   │   └─────────────────────────────┘   │   │  │ │ │
│   │   │   │   └─────────────────────────────────────┘   │  │ │ │
│   │   │   └─────────────────────────────────────────────┘  │ │ │
│   │   └─────────────────────────────────────────────────────┘ │ │
│   └───────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

## 在 XAML 中使用

### 直接使用固定值

```xml
<Border Classes="glass-strong" CornerRadius="36">
    <!-- 内容 -->
</Border>

<Button CornerRadius="20">点击</Button>
```

### 使用样式类

```xml
<!-- 使用预定义的 glass-panel 样式 -->
<Border Classes="glass-panel">
    <TextBlock Text="面板内容" />
</Border>

<!-- 组合多个样式类 -->
<Border Classes="glass-strong mica-strong">
    <!-- 内容 -->
</Border>
```

### 动态圆角（Code-Behind）

```csharp
// 根据格子大小动态计算圆角
var cellSize = 100; // 假设格子大小
var cornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);

BottomTaskbarContainer.CornerRadius = new CornerRadius(cornerRadius);
```

## 新增控件时的圆角规范

1. **确定元素层级** - 根据容器大小选择合适的级别
2. **遵循视觉一致性** - 同层级的元素使用相同圆角
3. **考虑内容安全区** - 圆角不应遮挡重要内容
4. **响应式适配** - 大屏幕使用较大圆角，小屏幕使用较小圆角

### 快速参考

```
新控件圆角选择流程：

1. 是窗口/大容器？        → Level 7 (36px)
2. 是面板/卡片？          → Level 5-6 (28-36px)
3. 是按钮/输入框？        → Level 3-4 (20-24px)
4. 是小组件/色块？        → Level 2 (16px)
5. 是图标/小元素？        → Level 1 (12px)
```

## 附录：修改历史

| 日期 | 修改人 | 说明 |
|------|--------|------|
| 2026-03-02 | AI Assistant | 初始规范，基于澎湃OS 3 设计语言 |

## 参考资料

- 澎湃OS 生命感美学设计
- Xiaomi HyperOS Design Guidelines
- 小米小部件审核规范 (dev.mi.com)