Files
LanMountainDesktop/.trae/specs/data-settings-page/design.md
lincube 84caca02bf Add Data settings page and storage scanner
Introduce a new "Data" settings page to visualize and manage local app storage. Adds DataStorageService (scanning, disk info, clean operations), DataSettingsPageViewModel, XAML view and code-behind, and HexToColor/HexToBrush converters; registers converters in App.axaml. Also update localization strings for the new page and add icon mapping so the settings entry uses the Database icon. Enables per-category and global cleaning workflows and formatted size display.
2026-05-07 16:34:31 +08:00

2.8 KiB
Raw Blame History

数据设置页设计文档

概述

在设置窗口中新增「数据」设置页,用于可视化展示和管理阑山桌面产生的各类本地数据。采用 Fluent Design 风格的横向堆叠条形图展示存储分布。

设计目标

  1. 让用户直观了解阑山桌面占用的存储空间
  2. 提供各类数据的占比可视化
  3. 支持按类别清理数据
  4. 显示相对于磁盘总容量的占比

页面结构

存储概览区域

顶部一个卡片,包含:

  • 横向堆叠条形图 — 各类数据用不同颜色的分段表示
  • 总占用大小 — 阑山桌面数据总大小(如 "1.2 GB"
  • 磁盘占比 — 占总磁盘空间的百分比(如 "占 C 盘 0.5%"
  • 图例 — 各颜色对应的数据类型

数据类型详情列表

下方列表展示每类数据:

  • 图标 + 名称
  • 占用大小
  • 描述/路径提示
  • 「清理」按钮(如适用)

操作按钮

  • 「刷新」— 重新扫描数据大小
  • 「一键清理」— 清理所有可清理的数据

数据类型

类型 颜色 可清理 路径
日志文件 灰色 log/
白板笔记 橙色 是(过期) Whiteboards/
插件数据 蓝色 Extensions/Plugins/
插件市场缓存 紫色 PluginMarket/
壁纸文件 粉色 Wallpapers/
设置文件 绿色 settings.json

技术实现

新增文件

  • LanMountainDesktop/Views/SettingsPages/DataSettingsPage.axaml — 页面视图
  • LanMountainDesktop/Views/SettingsPages/DataSettingsPage.axaml.cs — 页面代码隐藏
  • LanMountainDesktop/ViewModels/DataSettingsPageViewModel.cs — 视图模型
  • LanMountainDesktop/Services/DataStorageService.cs — 数据扫描服务

修改文件

  • LanMountainDesktop/Views/SettingsWindow.axaml.cs — 图标映射MapIcon添加 Database 图标

设置页注册

[SettingsPageInfo(
    "data",
    "Data",
    SettingsPageCategory.General,
    IconKey = "Database",
    SortOrder = 5,
    TitleLocalizationKey = "settings.data.title",
    DescriptionLocalizationKey = "settings.data.description")]

视觉设计

堆叠条形图

  • 高度24-32dp
  • 圆角:使用 DesignCornerRadiusSm
  • 分段间距2dp
  • 未占用空间:透明或浅色背景

颜色方案

使用 Material Design 颜色,与主题协调:

  • 日志Gray / BlueGray
  • 白板Orange / Amber
  • 插件Blue / Indigo
  • 缓存Purple / DeepPurple
  • 壁纸Pink
  • 设置Green / Teal

交互行为

  1. 页面加载时自动扫描数据大小(异步)
  2. 显示加载指示器
  3. 清理操作需要确认对话框
  4. 清理完成后自动刷新数据

安全考虑

  • 清理前确认用户意图
  • 设置文件不可清理(防止误删配置)
  • 清理操作记录日志