0.5.9

中文与插件市场

docs/CORNER_RADIUS_SPEC.md

@@ -1,177 +1,38 @@
-# 圆角设计规范 (Corner Radius Design System)
+# 圆角设计规范
 
-> 基于小米澎湃OS 3 (HyperOS) 设计语言
+## 中文
 
-## 设计理念
+本规范用于统一阑山桌面不同层级容器和控件的圆角尺度。
 
-澎湃OS 3 采用**"生命感美学"**设计语言，强调：
-- **全局圆角设计** - 所有界面元素均采用圆角
-- **视觉舒适统一** - 柔和、现代、细腻
-- **多级渲染** - 配合模糊混色与阴影
-- **层级分明** - 大容器使用大圆角，小元素使用小圆角
+### 基础层级
 
-## 圆角数值体系
+- Level 1：12px，小元素和图标容器
+- Level 2：16px，小型色块和紧凑控件
+- Level 3：20px，普通按钮
+- Level 4：24px，输入面板和小型容器
+- Level 5：28px，普通玻璃面板
+- Level 6：32px，强化容器
+- Level 7：36px，大容器、窗口、任务栏
 
-### 核心数值
+### 使用建议
 
-| 级别 | 圆角值 (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` 计算圆角，但仍要落在统一范围内。
 
-### 动态圆角
-
-动态圆角根据格子大小（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);
 ```
 
-## 新增控件时的圆角规范
+## English
 
-1. **确定元素层级** - 根据容器大小选择合适的级别
-2. **遵循视觉一致性** - 同层级的元素使用相同圆角
-3. **考虑内容安全区** - 圆角不应遮挡重要内容
-4. **响应式适配** - 大屏幕使用较大圆角，小屏幕使用较小圆角
+This specification keeps corner radius usage consistent across containers and controls.
 
-### 快速参考
+### Reference levels
 
-```
-新控件圆角选择流程：
-
-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)
+- 12px for small elements
+- 20px for common buttons
+- 28px for normal glass panels
+- 36px for large containers and windows