LanMountainDesktop/.trae/specs/settings-page-fluent-redesign/spec.md

设置页面 Fluent 设计改造规格说明书

Why

当前 LanMountainDesktop 设置页面存在以下问题：

1. 右侧详细设置区域被额外边框包裹，未能实现 Fluent Avalonia 控件的完整填充效果
2. 设置项未采用 Fluent 卡片设计风格，仍使用传统 Border + StackPanel 布局
3. 与 ClassIsland 项目的视觉风格差异较大

What Changes

• 移除页面内容区域的额外 Border 包裹，直接使用 ScrollViewer + StackPanel
• 参考 ClassIsland 项目，引入 SettingsExpander 控件替代传统布局
• 统一设置项的间距、圆角、字体等视觉规范
• 修改窗口布局，移除内容区域的 glass-panel 样式

Impact

Affected specs

• 设置页面 UI 布局规范
• Fluent 设计风格适配

Affected code

• Views/SettingsPages/*.axaml - 所有设置页面
• Views/SettingsWindow.axaml - 设置窗口布局
• Styles/GlassModule.axaml - 样式资源

---

ADDED Requirements

Requirement: 设置页面 Fluent 卡片设计

系统 SHALL 提供类似 ClassIsland 的 SettingsExpander 卡片式设置项。

Scenario: 设置页面布局

• WHEN 用户打开任意设置页面
• THEN 页面使用 ScrollViewer 直接包裹内容，无额外 Border 包裹
• AND THEN 设置项使用 SettingsExpander 或 Fluent 卡片样式

Requirement: 移除内容区域额外边框

系统 SHALL 移除右侧内容区域的 glass-panel 边框包裹。

Scenario: 内容区域无额外边框

• WHEN 用户查看设置页面内容
• THEN 内容直接显示在透明背景上，无额外边框包裹

Requirement: 设置项视觉规范

系统 SHALL 统一设置项的视觉样式。

Scenario: 设置项样式

• WHEN 开发者创建新的设置项
• THEN 使用统一的间距（Spacing）、圆角、字体大小
• AND THEN 参考 ClassIsland 的 SettingsExpander 样式

---

MODIFIED Requirements

Requirement: 设置页面布局结构

当前: Border → ScrollViewer → Border → StackPanel → 内容

修改后: ScrollViewer → StackPanel → 设置项（无额外 Border）

---

REMOVED Requirements

Requirement: 传统 Border 包裹布局

Reason: 实现 Fluent 设计风格，移除视觉噪音

Migration: 将现有 Border 包裹改为直接内容布局