# 天气组件 Material Design 重设计计划

> **目标：** 全面重构阑山桌面天气组件的视觉设计，遵循 Material Design 3 规范，参考 Google Weather、几何天气、Breez 天气和柠檬天气的设计语言。

---

## 当前状态分析

### 现有组件
1. **WeatherWidget** - 基础天气（温度+天气状况+位置）
2. **ExtendedWeatherWidget** - 扩展天气（含指标、逐小时、逐日预报）
3. **HourlyWeatherWidget** - 逐小时天气
4. **MultiDayWeatherWidget** - 多日天气
5. **WeatherClockWidget** - 天气时钟

### 现有问题
- 排版层次不清晰，文字大小对比不够
- 布局过于紧凑，缺乏呼吸感
- 内部卡片使用简单纯色背景，缺乏 Material 风格
- 背景场景和前景内容缺乏深度分离
- 圆角和间距不统一

### 现有视觉系统
- 4套调色板：Google（默认）、Geometric、Breezy、LemonFlutter
- 动态背景场景：MaterialWeatherSceneControl 绘制渐变+装饰
- 图标系统：WeatherIconView + WeatherIconAssetResolver

---

## 设计方向

### 核心原则
1. **Material Design 3** - 使用 M3 的排版、颜色、间距和形状规范
2. **信息层级清晰** - 大字体温度、次要信息弱化
3. **呼吸感** - 合理的间距和留白
4. **深度感** - 前景卡片与背景场景分离
5. **圆角一致性** - 遵循 DesignCornerRadius 规范

### 参考风格
- **Google Weather** - 大字体温度、清晰层级、圆角卡片、柔和渐变
- **几何天气** - 几何装饰、现代感
- **Breez** - 清新留白、柔和色彩
- **柠檬天气** - 活泼明亮

---

## 具体改动计划

### Task 1: 优化 MaterialWeatherPalette 和调色板系统

**文件：** `LanMountainDesktop/Views/Components/MaterialWeatherVisualTheme.cs`

**改动：**
- 调整所有调色板的对比度，确保文字可读性
- 优化背景渐变色彩，更加柔和自然
- 统一文字主色和次色的对比度比例
- 为每个风格增加 `SurfaceColor` 和 `SurfaceVariantColor` 用于卡片背景

**当前调色板字段：**
```csharp
public sealed record MaterialWeatherPalette(
    Color BackgroundTop,
    Color BackgroundBottom,
    Color PrimaryShape,
    Color SecondaryShape,
    Color AccentShape,
    Color TextPrimary,
    Color TextSecondary,
    Color SurfaceTint,
    Color OverlayTint);
```

**新增字段：**
```csharp
    Color SurfaceColor,        // 卡片表面色（低透明度白色/黑色）
    Color SurfaceVariantColor, // 变体表面色
    Color OutlineColor         // 分割线/边框色
```

---

### Task 2: 重构 WeatherWidget（基础天气组件）

**文件：**
- `LanMountainDesktop/Views/Components/WeatherWidget.axaml`
- `LanMountainDesktop/Views/Components/WeatherWidget.axaml.cs`

**设计目标：**
- 大字体温度显示（类似 Google Weather）
- 天气状况文字清晰可读
- 位置和温度范围弱化显示
- 图标与文字对齐优化

**XAML 改动：**
```xml
<Border x:Name="RootBorder"
        CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
        ClipToBounds="True">
    <Grid>
        <components:MaterialWeatherSceneControl x:Name="Scene" />
        <Border x:Name="OverlayBorder" />
        
        <!-- 主内容区 -->
        <Grid x:Name="ContentGrid" 
              RowDefinitions="*,Auto" 
              Margin="20,16,20,14">
            
            <!-- 上半区：温度 + 图标 -->
            <Grid ColumnDefinitions="*,Auto">
                <StackPanel VerticalAlignment="Center" Spacing="4">
                    <!-- 温度：超大字体 -->
                    <TextBlock x:Name="TemperatureTextBlock" 
                               Text="--°" 
                               FontSize="72" 
                               FontWeight="Bold"
                               LineHeight="72" />
                    <!-- 天气状况 -->
                    <TextBlock x:Name="ConditionTextBlock" 
                               Text="Loading" 
                               FontSize="18" 
                               FontWeight="SemiBold" 
                               TextTrimming="CharacterEllipsis" />
                </StackPanel>
                
                <!-- 右侧图标 -->
                <components:WeatherIconView x:Name="MainIcon" 
                                            Grid.Column="1" 
                                            Width="72" 
                                            Height="72" 
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Center" />
            </Grid>
            
            <!-- 底部信息栏 -->
            <Grid Grid.Row="1" ColumnDefinitions="*,Auto">
                <TextBlock x:Name="LocationTextBlock" 
                           Text="Weather" 
                           FontSize="13" 
                           FontWeight="Medium" 
                           TextTrimming="CharacterEllipsis"
                           VerticalAlignment="Bottom" />
                <TextBlock x:Name="RangeTextBlock" 
                           Grid.Column="1"
                           Text="-- / --" 
                           FontSize="13" 
                           FontWeight="Medium" 
                           HorizontalAlignment="Right"
                           VerticalAlignment="Bottom" />
            </Grid>
        </Grid>
    </Grid>
</Border>
```

**CS 改动：**
- 调整响应式布局的字体缩放比例
- 更新颜色绑定使用新的调色板字段

---

### Task 3: 重构 ExtendedWeatherWidget（扩展天气组件）

**文件：**
- `LanMountainDesktop/Views/Components/ExtendedWeatherWidget.axaml`
- `LanMountainDesktop/Views/Components/ExtendedWeatherWidget.axaml.cs`

**设计目标：**
- 顶部区域：位置+温度+图标横向排列
- 指标区域：使用 Material 3 风格的标签卡片
- 逐小时预报：水平滚动卡片，时间+图标+温度
- 逐日预报：列表式布局，日期+图标+高低温

**XAML 改动：**
```xml
<Border x:Name="RootBorder"
        CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
        ClipToBounds="True">
    <Grid>
        <components:MaterialWeatherSceneControl x:Name="Scene" />
        <Border x:Name="OverlayBorder" />
        
        <Grid x:Name="ContentGrid" 
              RowDefinitions="Auto,Auto,Auto,Auto" 
              Margin="20,16,20,14" 
              RowSpacing="12">
            
            <!-- 顶部：位置 + 图标 + 温度 -->
            <Grid ColumnDefinitions="*,Auto,Auto" VerticalAlignment="Center">
                <StackPanel VerticalAlignment="Center">
                    <TextBlock x:Name="LocationTextBlock" 
                               Text="Weather" 
                               FontSize="13" 
                               FontWeight="Medium" 
                               TextTrimming="CharacterEllipsis"
                               Opacity="0.72" />
                    <TextBlock x:Name="ConditionTextBlock" 
                               Text="Loading" 
                               FontSize="16" 
                               FontWeight="SemiBold" 
                               TextTrimming="CharacterEllipsis" />
                </StackPanel>
                <components:WeatherIconView x:Name="MainIcon" 
                                            Grid.Column="1" 
                                            Width="56" 
                                            Height="56" 
                                            Margin="0,0,10,0" />
                <TextBlock x:Name="TemperatureTextBlock" 
                           Grid.Column="2" 
                           Text="--°" 
                           FontSize="56" 
                           FontWeight="Bold"
                           VerticalAlignment="Center" />
            </Grid>
            
            <!-- 指标区域 -->
            <UniformGrid x:Name="MetricGrid" Grid.Row="1" Rows="1" Columns="3" />
            
            <!-- 逐小时预报 -->
            <Border Grid.Row="2" 
                    Background="{DynamicResource SurfaceColor}" 
                    CornerRadius="{DynamicResource DesignCornerRadiusMd}"
                    Padding="10,8">
                <UniformGrid x:Name="HourlyGrid" Rows="1" Columns="6" />
            </Border>
            
            <!-- 逐日预报 -->
            <Border Grid.Row="3" 
                    Background="{DynamicResource SurfaceColor}" 
                    CornerRadius="{DynamicResource DesignCornerRadiusMd}"
                    Padding="10,8">
                <UniformGrid x:Name="DailyGrid" Rows="1" Columns="5" />
            </Border>
        </Grid>
    </Grid>
</Border>
```

**CS 改动：**
- `CreateMetric` 方法：使用圆角卡片，Material 3 风格标签
- `BuildHourlyItems` 方法：改进卡片样式，统一圆角
- `BuildDailyItems` 方法：改进卡片样式，统一圆角

---

### Task 4: 重构 HourlyWeatherWidget（逐小时天气组件）

**文件：**
- `LanMountainDesktop/Views/Components/HourlyWeatherWidget.axaml`
- `LanMountainDesktop/Views/Components/HourlyWeatherWidget.axaml.cs`

**设计目标：**
- 顶部简洁信息栏
- 逐小时预报使用 Material 卡片风格
- 时间、图标、温度垂直排列

**XAML 改动：**
```xml
<Border x:Name="RootBorder"
        CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
        ClipToBounds="True">
    <Grid>
        <components:MaterialWeatherSceneControl x:Name="Scene" />
        <Border x:Name="OverlayBorder" />
        
        <Grid x:Name="ContentGrid" 
              RowDefinitions="Auto,*" 
              Margin="18,14" 
              RowSpacing="12">
            
            <!-- 顶部信息栏 -->
            <Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">
                <TextBlock x:Name="TemperatureTextBlock" 
                           Text="--°" 
                           FontSize="42" 
                           FontWeight="Bold" 
                           VerticalAlignment="Center" />
                <StackPanel Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center">
                    <TextBlock x:Name="ConditionTextBlock" 
                               Text="Loading" 
                               FontSize="15" 
                               FontWeight="SemiBold" 
                               TextTrimming="CharacterEllipsis" />
                    <TextBlock x:Name="LocationTextBlock" 
                               Text="Weather" 
                               FontSize="12" 
                               FontWeight="Medium" 
                               Opacity="0.72" 
                               TextTrimming="CharacterEllipsis" />
                </StackPanel>
                <TextBlock x:Name="RangeTextBlock" 
                           Grid.Column="2" 
                           Text="-- / --" 
                           FontSize="12" 
                           FontWeight="Medium" 
                           VerticalAlignment="Center" 
                           Opacity="0.72" 
                           Margin="0,0,10,0" />
                <components:WeatherIconView x:Name="MainIcon" 
                                            Grid.Column="3" 
                                            Width="48" 
                                            Height="48" />
            </Grid>
            
            <!-- 逐小时预报卡片容器 -->
            <Border Grid.Row="1" 
                    Background="{DynamicResource SurfaceColor}" 
                    CornerRadius="{DynamicResource DesignCornerRadiusMd}"
                    Padding="8,6">
                <UniformGrid x:Name="HourlyGrid" Rows="1" Columns="6" />
            </Border>
        </Grid>
    </Grid>
</Border>
```

---

### Task 5: 重构 MultiDayWeatherWidget（多日天气组件）

**文件：**
- `LanMountainDesktop/Views/Components/MultiDayWeatherWidget.axaml`
- `LanMountainDesktop/Views/Components/MultiDayWeatherWidget.axaml.cs`

**设计目标：**
- 左侧：当前天气信息（图标+温度+状况+位置）
- 右侧：多日预报列表，使用行式布局

**XAML 改动：**
```xml
<Border x:Name="RootBorder"
        CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
        ClipToBounds="True">
    <Grid>
        <components:MaterialWeatherSceneControl x:Name="Scene" />
        <Border x:Name="OverlayBorder" />
        
        <Grid x:Name="ContentGrid" 
              ColumnDefinitions="1.2*,1.6*" 
              Margin="18,14" 
              ColumnSpacing="14">
            
            <!-- 左侧当前天气 -->
            <StackPanel VerticalAlignment="Center" Spacing="6">
                <components:WeatherIconView x:Name="MainIcon" 
                                            Width="64" 
                                            Height="64" 
                                            HorizontalAlignment="Left" />
                <TextBlock x:Name="TemperatureTextBlock" 
                           Text="--°" 
                           FontSize="42" 
                           FontWeight="Bold" />
                <TextBlock x:Name="ConditionTextBlock" 
                           Text="Loading" 
                           FontSize="15" 
                           FontWeight="SemiBold" 
                           TextTrimming="CharacterEllipsis" />
                <TextBlock x:Name="LocationTextBlock" 
                           Text="Weather" 
                           FontSize="12" 
                           FontWeight="Medium" 
                           Opacity="0.72" 
                           TextTrimming="CharacterEllipsis" />
            </StackPanel>
            
            <!-- 右侧多日预报 -->
            <Border Grid.Column="1" 
                    Background="{DynamicResource SurfaceColor}" 
                    CornerRadius="{DynamicResource DesignCornerRadiusMd}"
                    Padding="10,8">
                <ItemsControl x:Name="DailyItemsControl" />
            </Border>
        </Grid>
    </Grid>
</Border>
```

---

### Task 6: 重构 WeatherClockWidget（天气时钟组件）

**文件：**
- `LanMountainDesktop/Views/Components/WeatherClockWidget.axaml`
- `LanMountainDesktop/Views/Components/WeatherClockWidget.axaml.cs`

**设计目标：**
- 左侧：大字体时间+日期
- 右侧：天气图标+温度+状况
- 信息层级清晰

**XAML 改动：**
```xml
<Border x:Name="RootBorder"
        CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
        ClipToBounds="True">
    <Grid>
        <components:MaterialWeatherSceneControl x:Name="Scene" />
        <Border x:Name="OverlayBorder" />
        
        <Grid x:Name="ContentGrid" 
              ColumnDefinitions="*,Auto" 
              Margin="18,12" 
              ColumnSpacing="12">
            
            <!-- 左侧时间 -->
            <StackPanel VerticalAlignment="Center" Spacing="2">
                <TextBlock x:Name="TimeTextBlock" 
                           Text="--:--" 
                           FontSize="38" 
                           FontWeight="Bold"
                           LineHeight="38" />
                <TextBlock x:Name="DateTextBlock" 
                           Text="Weather" 
                           FontSize="12" 
                           FontWeight="Medium" 
                           Opacity="0.72" 
                           TextTrimming="CharacterEllipsis" />
            </StackPanel>
            
            <!-- 右侧天气 -->
            <StackPanel Grid.Column="1" 
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Right" 
                        Spacing="1">
                <components:WeatherIconView x:Name="MainIcon" 
                                            Width="44" 
                                            Height="44" 
                                            HorizontalAlignment="Right" />
                <TextBlock x:Name="TemperatureTextBlock" 
                           Text="--°" 
                           FontSize="20" 
                           FontWeight="SemiBold" 
                           HorizontalAlignment="Right" />
                <TextBlock x:Name="ConditionTextBlock" 
                           Text="Loading" 
                           FontSize="11" 
                           FontWeight="Medium" 
                           HorizontalAlignment="Right" 
                           TextTrimming="CharacterEllipsis" 
                           MaxWidth="100" 
                           Opacity="0.82" />
            </StackPanel>
        </Grid>
    </Grid>
</Border>
```

---

### Task 7: 更新 ExtendedWeatherWidget 的代码后置文件

**文件：** `LanMountainDesktop/Views/Components/ExtendedWeatherWidget.axaml.cs`

**改动：**
- `CreateMetric` 方法改进：
  - 使用 `DesignCornerRadiusSm` 圆角
  - 使用新的 `SurfaceColor` 作为卡片背景
  - 优化字体大小和间距

- `BuildHourlyItems` 方法改进：
  - 使用 `DesignCornerRadiusSm` 圆角
  - 使用 `SurfaceColor` 作为卡片背景
  - 时间、图标、温度垂直排列，居中对齐

- `BuildDailyItems` 方法改进：
  - 使用 `DesignCornerRadiusSm` 圆角
  - 使用 `SurfaceColor` 作为卡片背景
  - 日期、图标、高低温垂直排列

---

### Task 8: 更新 HourlyWeatherWidget 的代码后置文件

**文件：** `LanMountainDesktop/Views/Components/HourlyWeatherWidget.axaml.cs`

**改动：**
- `CreateChip` 方法改进：
  - 使用 `DesignCornerRadiusSm` 圆角
  - 使用 `SurfaceColor` 作为卡片背景
  - 优化垂直排列的间距

---

### Task 9: 更新 MultiDayWeatherWidget 的代码后置文件

**文件：** `LanMountainDesktop/Views/Components/MultiDayWeatherWidget.axaml.cs`

**改动：**
- `CreateRow` 方法改进：
  - 添加底部分割线（除最后一行）
  - 优化列间距和对齐
  - 高低温使用不同透明度区分

---

### Task 10: 更新 MaterialWeatherVisualTheme 调色板

**文件：** `LanMountainDesktop/Views/Components/MaterialWeatherVisualTheme.cs`

**改动：**
- 为 `MaterialWeatherPalette` 添加新字段：
  - `SurfaceColor` - 用于卡片表面
  - `SurfaceVariantColor` - 用于变体表面
  - `OutlineColor` - 用于分割线

- 更新所有调色板生成方法：
  - `ResolveGooglePalette`
  - `ResolveGeometricPalette`
  - `ResolveBreezyPalette`
  - `ResolveLemonPalette`

- 每个调色板需要为白天/夜晚模式提供合适的 SurfaceColor：
  - 白天：低透明度白色（如 `#14FFFFFF`）
  - 夜晚：低透明度黑色（如 `#1A000000`）

---

### Task 11: 构建和测试

**命令：**
```bash
dotnet build LanMountainDesktop.slnx -c Debug
dotnet test LanMountainDesktop.slnx -c Debug
```

**验证清单：**
- [ ] 所有天气组件正常编译
- [ ] 运行时无异常
- [ ] 4套视觉风格正常切换
- [ ] 响应式布局正常工作
- [ ] 圆角资源正确应用

---

## 文件改动汇总

| 文件 | 改动类型 | 说明 |
|------|---------|------|
| `MaterialWeatherVisualTheme.cs` | 修改 | 添加 SurfaceColor 等字段，更新所有调色板 |
| `WeatherWidget.axaml` | 修改 | 重构布局，优化排版 |
| `WeatherWidget.axaml.cs` | 修改 | 调整响应式布局和颜色绑定 |
| `ExtendedWeatherWidget.axaml` | 修改 | 重构布局，添加卡片容器 |
| `ExtendedWeatherWidget.axaml.cs` | 修改 | 改进卡片创建方法 |
| `HourlyWeatherWidget.axaml` | 修改 | 重构布局，添加卡片容器 |
| `HourlyWeatherWidget.axaml.cs` | 修改 | 改进卡片创建方法 |
| `MultiDayWeatherWidget.axaml` | 修改 | 重构布局，添加卡片容器 |
| `MultiDayWeatherWidget.axaml.cs` | 修改 | 改进行创建方法 |
| `WeatherClockWidget.axaml` | 修改 | 重构布局，优化排版 |
| `WeatherClockWidget.axaml.cs` | 修改 | 调整响应式布局 |

---

## 设计规范检查清单

- [ ] 所有组件根容器使用 `DesignCornerRadiusComponent`
- [ ] 内部卡片使用 `DesignCornerRadiusMd` 或 `DesignCornerRadiusSm`
- [ ] 不使用硬编码圆角值
- [ ] 文字对比度符合 VISUAL_SPEC 要求
- [ ] 间距使用一致的倍数（4px 基线）
- [ ] 字体层级：温度(64-72px) > 状况(16-18px) > 位置/范围(12-13px)