Skip to content

ui-design.md

Latest commit

 

History

History
223 lines (152 loc) · 6.62 KB

ui-design.md

File metadata and controls

223 lines (152 loc) · 6.62 KB
Raw

EnvVar UI 设计文档

1. 设计目标

  • 清晰展示环境变量信息
  • 高效进行 CRUD 操作
  • 提升多值变量（如 PATH）的可读性
  • 提供结构化编辑能力
  • 降低误操作风险

设计原则：

  • 简洁优先
  • 信息层级清晰
  • 操作路径直观
  • 单一页面完成主要操作

2. 整体布局

采用经典「列表 + 详情面板」结构：

┌────────────────────────────────────────────┐
│ 菜单栏（文件 / 设置 / 帮助）              │
├────────────────────────────────────────────┤
│ 顶部工具栏（刷新 / 新建 / 展示模式）        │
├───────────────┬────────────────────────────┤
│ 左侧变量列表   │ 右侧编辑面板               │
│ （搜索 + 表格）│ （字段 + 结构化编辑）       │
├───────────────┴────────────────────────────┤
│ 底部状态栏                                  │
└────────────────────────────────────────────┘

布局比例：

  • 左侧列表：40%（2*）
  • 右侧详情：60%（3*）
  • 中间 GridSplitter 可拖拽调整

4. 顶部菜单

菜单 子项 功能
文件 导出 将全部变量导出为 JSON
导入 从 JSON 文件导入变量
打开数据目录 在资源管理器中打开存储目录
退出 关闭应用
设置 语言 English / 简体中文 / 繁體中文
主题 浅色 / 深色 / 跟随系统
显示 / 隐藏别名列 切换是否在列表中显示别名
最大历史记录 每个变量保存的历史版本数量
日志 配置日志级别和保留时间等
帮助 ⭐ Star on GitHub 在浏览器中打开 GitHub 项目主页
报告问题 在浏览器中打开 GitHub Issues 页面
检查更新... 检查是否有新版本并提示下载
关于 显示应用信息

4. 顶部工具栏

按钮 功能
刷新 重新从注册表加载环境变量
新建 右侧面板进入新建模式
展示模式 下拉选择：Grouped（默认） / Merged

右侧面板顶部显示当前数据文件路径（只读）。

5. 左侧变量列表

搜索

列表顶部搜索框，空时显示灰色放大镜图标作为暗示，实时按 Name / Alias / Value 过滤。

列定义

列名 绑定属性 说明
Name NameDisplay 环境变量名（多值变量加 [LIST] 前缀）
Alias Alias 用户自定义名称
Level Level User / System
Preview Preview 值预览（截断显示）

排序

点击列头排序，三次点击循环：升序（▲）→ 降序（▼）→ 重置。

分组展示

Grouped 模式下按 Level 分组，每组显示分组标题。

行为

  • 单击变量：右侧加载详情
  • 当前选中行高亮

6. 右侧编辑面板

字段

字段 类型 说明
Name 文本框 变量名
Level 下拉框 User / System
Alias 文本框 用户自定义名称
Description 多行文本框 备注说明（常见变量会自动填充预设描述）
Value 多行文本框（等宽字体） 变量值，默认紧凑显示，限制最大高度并在内容过多时提供内部滚动

字段标签列采用自动宽度（SharedSizeGroup），确保中英文模式下标签与输入框间距一致且紧凑。所有字段容器（包含结构化编辑区）均包裹在 ScrollViewer 中，以保证在面板空间有限时可滚动访问所有内容。

操作按钮

操作按钮固定在右侧面板底部，不随上方内容滚动，始终保持可见。

  • 保存：写入注册表和元数据
  • 删除：仅编辑已有变量时可用，需确认
  • 取消：恢复为选中项原始内容或回到新建模式
  • 历史：弹出当前变量的历史版本列表（数量上限可在设置中自定义，范围 0-10，默认为 5 条），选择后将 Value、Alias、Description 加载到编辑器（不自动保存）；仅编辑已有变量时可用

7. 结构化编辑区

当变量值包含分号时自动显示。

操作按钮

按钮 功能
＋ 在选中项后插入新行
－ 删除选中行
↑ 选中项上移
↓ 选中项下移
A↓ 全部按字母升序排列
Z↓ 全部按字母降序排列

列表

  • 每项可直接编辑（透明背景 TextBox）
  • 显示序号索引 [0]、[1]、……
  • 编辑后自动同步回 Value 字符串

8. 底部状态栏

显示最近一次操作的反馈信息，如：

  • 「已加载 42 个环境变量。」
  • 「已保存 JAVA_HOME@User。」
  • 「已从历史记录恢复值。」

9. 关于对话框

显示以下信息：

  • 更新日期（取应用构建日期）
  • 作者
  • 许可证
  • 项目地址（可点击跳转）

10. 交互流程

新建变量

  1. 点击「新建」
  2. 右侧清空，进入新建模式
  3. 填写字段，点击保存

编辑变量

  1. 左侧选中变量
  2. 右侧加载数据
  3. 修改字段，点击保存
  4. 系统自动对多值变量（如 PATH）进行去重处理并保存

删除变量

  1. 选中变量
  2. 点击删除 → 弹出确认对话框
  3. 确认后删除

覆盖确认

保存时如果目标 Name + Level 已存在（且不是当前变量自身），弹出覆盖确认。

11. 视觉设计

  • 风格：简洁工具化，浅色背景
  • 等宽字体用于 Value 展示（Cascadia Code）
  • 控件间距 ≥ 8px，面板内边距 ≥ 12px
  • 圆角卡片式区域划分（CornerRadius = 6～8）

12. 错误处理

  • 权限不足：提示以管理员身份重新启动
  • 保存 / 删除失败：在状态栏和弹窗中提示
  • 非法输入（空名称、名称含 =）：保存时校验并提示

13. 界面状态持久化

  • 窗口位置与大小：自动记忆并恢复上次正常关闭时的窗口状态。
  • 安全检查：恢复位置时，必须确保窗口 100% 完整显示在当前所有显示器的可见范围内；若有任何部分超出边界，则自动重置到主屏幕中心，确保用户始终能看到完整界面。