miao-moe/LanMountainDesktop
1
0
Fork 0
mirror of https://github.com/wwiinnddyy/LanMountainDesktop.git synced 2026-06-20 23:54:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

0.5.9

Browse Source 
中文与插件市场
This commit is contained in:
lincube
2026-03-10 12:14:49 +08:00
parent cdffaa16eb
commit 85f7a18cbc
24 changed files with 804 additions and 1443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
docs/CORNER_RADIUS_SPEC.md
View File

@@ -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

140
docs/VISUAL_SPEC.md
View File

@@ -1,126 +1,42 @@
# LanMountainDesktop 视觉规范（主题色 + 毛玻璃）
# 视觉规范
## 1. 主题色应用规范
## 中文
### 1.1 颜色角色定义
本规范用于统一阑山桌面的主题色、玻璃效果和基础视觉语义。
- `Primary`（主色）：品牌主导色，用于主要操作、关键状态提示。
- `Secondary`（辅助色）：主色的低权重变体，用于次级强调、辅助信息。
- `Accent`（强调色）：可被用户替换的动态主题色，用于选中态、激活态、聚焦态。
- `OnAccent`：放在强调色背景上的文本/图标颜色。
- `SurfaceBase` / `SurfaceRaised` / `SurfaceOverlay`：基础背景、抬升层、遮罩层。
- `TextPrimary` / `TextSecondary` / `TextMuted` / `TextAccent`：文字语义层级。
### 颜色角色
### 1.2 UI 元素映射规则
- `Primary`：品牌主色
- `Secondary`：辅助色
- `Accent`：强调色与选中态主色
- `OnAccent`：强调色背景上的文字或图标
- `SurfaceBase` / `SurfaceRaised` / `SurfaceOverlay`：背景层级
- `TextPrimary` / `TextSecondary` / `TextMuted` / `TextAccent`：文本层级
- 主按钮、主导航选中态：`Accent` + `OnAccent`
- 次级按钮/输入控件：`AdaptiveButtonBackgroundBrush` + `TextPrimary`
- 页头标题：`TextPrimary`
- 说明/辅助文本：`TextSecondary` / `TextMuted`
- 设置页导航激活项：`AdaptiveNavItemSelectedBackgroundBrush` + `AdaptiveNavSelectedTextBrush`
### 使用规则
### 1.3 统一资源键（单一真相源）
- 主按钮和主要导航选中态使用 `Accent + OnAccent`
- 次级操作和输入控件优先使用语义背景色，不直接写死颜色
- 页面层只使用资源键和语义类名，不写业务颜色常量
- 主题核心：
- `AdaptivePrimaryBrush`
- `AdaptiveSecondaryBrush`
- `AdaptiveAccentBrush`
- `AdaptiveOnAccentBrush`
- 文本：
- `AdaptiveTextPrimaryBrush`
- `AdaptiveTextSecondaryBrush`
- `AdaptiveTextMutedBrush`
- `AdaptiveTextAccentBrush`
- 表面：
- `AdaptiveSurfaceBaseBrush`
- `AdaptiveSurfaceRaisedBrush`
- `AdaptiveSurfaceOverlayBrush`
### 玻璃效果层级
## 2. 毛玻璃（Glassmorphism）统一实现方案
- `glass-overlay`：最外层遮罩
- `glass-strong`：主要大容器
- `glass-panel`：子区域、小面板、卡片
### 2.1 分层标准
### 可访问性
- `glass-overlay`：最高层遮罩（设置页背板）
- `glass-strong`：主内容容器（设置页主体）
- `glass-panel`：子功能区、组件容器（网格卡片、按钮容器）
- 正文对比度目标不低于 `4.5:1`
- 大号文字和重点文字不低于 `3.0:1`
- 主题服务负责对前景色做自动对比度修正
### 2.2 参数标准（模拟毛玻璃，跨平台稳定）
## English
- 描边：统一去除（`BorderThickness = 0`）
- 模糊半径资源（供样式/扩展复用）：
- `AdaptiveGlassPanelBlurRadius`（日 18 / 夜 22）
- `AdaptiveGlassStrongBlurRadius`（日 24 / 夜 28）
- 透明度资源：
- `AdaptiveGlassPanelOpacity`（日 0.88 / 夜 0.92）
- `AdaptiveGlassStrongOpacity`（日 0.92 / 夜 0.95）
- 背景色：由 `GlassEffectService` 基于主题色动态混合，统一下发到：
- `AdaptiveGlassPanelBackgroundBrush`
- `AdaptiveGlassStrongBackgroundBrush`
- `AdaptiveGlassOverlayBackgroundBrush`
This specification defines the visual language of LanMountainDesktop, including theme roles, glass layers, and semantic color usage.
## 3. 视觉一致性策略
- 全局样式入口：`Styles/GlassModule.axaml`
- 全局主题入口：`ThemeColorSystemService` + `GlassEffectService`
- 页面侧仅使用语义资源键和 `glass-*` 类，不写硬编码颜色
- `MainWindow` 只负责编排：切换模式、选择主题色、触发资源重算
## 4. 可访问性（WCAG）
### 4.1 对比度目标
- 正文文本：`>= 4.5:1`
- 大号文本 / 强调文本：`>= 3.0:1`
### 4.2 实现方式
- `Theme/ColorMath.cs` 提供：
- 相对亮度计算
- 对比度计算
- `EnsureContrast(...)` 自动修正文本前景色
- `ThemeColorSystemService` 在生成 `TextPrimary/TextSecondary/TextMuted/NavText` 时强制走对比度校正
## 5. 跨尺寸与分辨率一致性
- 启用像素对齐：`UseLayoutRounding="True"` + `SnapsToDevicePixels="True"`
- 桌面网格布局通过统一计算函数输出 `row/col/cell`，主视图与预览共用算法
- 预览区域按窗口实际宽高比缩放，保持 Win11 风格比例一致性
- 关键尺寸自适应（字体、内边距、圆角）随 `cellSize` 动态计算
## 6. 实现代码示例
### 6.1 主题系统应用（C#）
```csharp
var context = new ThemeColorContext(
selectedAccent,
isLightBackground,
isLightNavBackground,
isNightMode);
ThemeColorSystemService.ApplyThemeResources(Resources, context);
GlassEffectService.ApplyGlassResources(Resources, context);
```
### 6.2 页面层使用语义资源（AXAML）
```xml
<Border Classes="glass-overlay" />
<Border Classes="glass-strong" CornerRadius="16">
<Border Classes="glass-panel" CornerRadius="10" Padding="14">
<TextBlock Foreground="{DynamicResource AdaptiveTextPrimaryBrush}" />
<Button Background="{DynamicResource AdaptiveButtonBackgroundBrush}" />
</Border>
</Border>
```
### 6.3 无描边层级区分原则（AXAML）
```xml
<Style Selector="Border.glass-panel">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Opacity" Value="{DynamicResource AdaptiveGlassPanelOpacity}" />
</Style>
```
### Key rules
- use semantic resource keys instead of hard-coded colors
- keep glass layers visually distinct
- maintain contrast targets for readability