MGit已完成UI重构，采用VSCode风格的界面设计，提供现代化、专业的用户体验。本文档介绍新UI的特点、配色方案和使用说明。
位于窗口最左侧的垂直图标栏，提供快速导航功能。
功能按钮：
- 资源管理器（📁）：显示文件浏览器，管理Markdown文件
- 搜索（🔍）：全局搜索功能（开发中）
- 源代码管理（Git图标）：显示Git面板，管理版本控制
- 运行和调试（
▶️ ）：调试功能（开发中） - 扩展（方块图标）：管理插件和扩展
底部按钮：
- 账户（👤）：账户管理
- 设置（⚙️）：应用设置
特点：
- 互斥选择：同时只能激活一个视图
- 活动指示器：当前激活的按钮有蓝色指示条
- 悬停效果：鼠标悬停时背景变化
紧邻活动栏的面板区域，根据活动栏选择显示不同内容。
主要视图：
- 文件浏览器视图：树形结构显示文件和目录
- Git视图：显示变更、分支管理等Git功能
- 插件视图：显示已安装的插件
特点：
- 可展开/收起动画
- 宽度可调整（200-400px）
- 平滑的过渡动画
中央主要区域，用于编辑Markdown文档和预览。
功能：
- 左侧：Markdown编辑器，支持语法高亮
- 右侧：实时预览面板
- 可通过分割器调整两侧宽度
编辑器特点：
- VSCode风格的语法高亮配色
- 行号显示
- 代码折叠
- 自动补全
位于窗口底部的信息栏，显示当前状态。
左侧信息：
- Git分支名称（可点击切换分支）
- Git状态（添加/修改/删除文件数）
- 错误和警告计数
右侧信息：
- 行列号（可点击跳转）
- 缩进信息（空格/制表符）
- 文件编码（UTF-8等）
- 换行符类型（LF/CRLF）
- 语言模式（Markdown）
- 反馈和通知按钮
MGit的深色主题完全还原VSCode Dark主题的配色：
| 元素 | 颜色代码 | 说明 |
|---|---|---|
| 编辑器背景 | #1E1E1E | 主编辑区背景 |
| 侧边栏背景 | #252526 | 文件浏览器等侧边栏背景 |
| 活动栏背景 | #333333 | 左侧图标栏背景 |
| 状态栏背景 | #007ACC | 底部状态栏背景（蓝色） |
| 主要文本 | #CCCCCC | 常规文本颜色 |
| 次要文本 | #858585 | 次要信息文本 |
| 选中背景 | #264F78 | 选中项背景 |
| 悬停背景 | #2A2D2E | 鼠标悬停背景 |
| 边框颜色 | #454545 | 分隔线和边框 |
语法高亮颜色：
- 关键字：#569CD6（蓝色）
- 字符串：#CE9178（橙粉色）
- 注释：#6A9955（绿色）
- 函数：#DCDCAA（淡黄色）
- 变量：#9CDCFE（浅蓝色）
- 类型：#4EC9B0（青绿色）
浅色主题配色同样还原VSCode Light主题：
| 元素 | 颜色代码 | 说明 |
|---|---|---|
| 编辑器背景 | #FFFFFF | 主编辑区背景（白色） |
| 侧边栏背景 | #F3F3F3 | 文件浏览器等侧边栏背景 |
| 活动栏背景 | #2C2C2C | 左侧图标栏背景（深灰） |
| 状态栏背景 | #007ACC | 底部状态栏背景（蓝色） |
| 主要文本 | #000000 | 常规文本颜色（黑色） |
| 次要文本 | #6A6A6A | 次要信息文本 |
| 选中背景 | #ADD6FF | 选中项背景 |
| 悬停背景 | #F0F0F0 | 鼠标悬停背景 |
| 边框颜色 | #E5E5E5 | 分隔线和边框 |
语法高亮颜色：
- 关键字：#0000FF（蓝色）
- 字符串：#A31515（红色）
- 注释：#008000（绿色）
- 函数：#795E26（棕色）
- 变量：#001080（深蓝色）
- 类型：#267F99（青色）
MGit提供了丰富的动画效果，使UI交互更加流畅自然。
- 展开动画：从0宽度平滑展开到250px
- 收起动画：平滑收起到0宽度
- 时长：200毫秒
- 缓动曲线：InOutQuad（先加速后减速）
用于内容切换、通知显示等场景。
- 淡入：透明度从0.0到1.0
- 淡出：透明度从1.0到0.0
- 时长：150-200毫秒
- 侧边滑入：从屏幕边缘滑入
- 通知滑入：通知从右侧滑入
- 缓动曲线：OutCubic（减速效果）
- 弹跳动画：用于提示和强调
- 抖动动画：用于错误提示
- 脉冲动画：用于加载状态
- 主按钮：蓝色背景（#007ACC），白色文字
- 次按钮：透明背景，边框高亮
- 工具按钮：透明背景，悬停时变灰
- 圆角：4px
- 内边距：6px 14px
- 边框：1px实线，默认颜色#CECECE（浅色）/#3C3C3C（深色）
- 聚焦边框：蓝色#007ACC
- 圆角：4px
- 内边距：4px 8px
- 项目内边距：4px
- 项目圆角：4px
- 悬停背景：半透明灰色
- 选中背景：蓝色高亮
- 宽度/高度：12px
- 滑块颜色：深色主题#424242，浅色主题#C2C2C2
- 悬停颜色：稍深
- 圆角：6px
用户可以在设置中切换主题：
- 点击活动栏底部的设置按钮
- 选择主题选项
- 选择深色或浅色主题
- 主题会平滑过渡切换
| 功能 | 快捷键 |
|---|---|
| 切换资源管理器 | Ctrl+Shift+E |
| 切换搜索 | Ctrl+Shift+F |
| 切换源代码管理 | Ctrl+Shift+G |
| 切换调试 | Ctrl+Shift+D |
| 切换扩展 | Ctrl+Shift+X |
| 打开设置 | Ctrl+, |
- PyQt5：Qt5的Python绑定
- PyQt-Fluent-Widgets：基础UI组件库
- QPropertyAnimation：属性动画
- QSS (Qt Style Sheets)：样式表
- VSCodeActivityBar：活动栏组件
- VSCodeStatusBar：状态栏组件
- VSCodeMainWindowEnhancer：主窗口增强器
- AnimationHelper：动画辅助类
- VSCodeTheme：主题配色定义
# 1. 创建应用
app = QApplication(sys.argv)
# 2. 应用主题
from src.theme.vscode_theme import apply_vscode_dark_theme
apply_vscode_dark_theme(app)
# 3. 创建主窗口
window = MainWindow()
# 4. 应用UI增强
from src.views.vscode_enhancer import VSCodeMainWindowEnhancer
enhancer = VSCodeMainWindowEnhancer(window)
enhancer.enhance()
# 5. 显示窗口
window.show()在src/theme/vscode_theme.py中修改颜色常量：
class VSCodeDarkTheme:
EDITOR_BG = "#1E1E1E" # 修改这里可以更改编辑器背景色
# ... 其他颜色使用AnimationHelper创建自定义动画：
from src.utils.vscode_animations import AnimationHelper
# 创建淡入动画
animation = AnimationHelper.fade_in(widget, duration=300)
animation.start()在VSCodeActivityBar中添加新按钮：
self.customBtn = self._createButton(FluentIcon.CUSTOM, "自定义功能")
self.customBtn.clicked.connect(self.customClicked.emit)
layout.addWidget(self.customBtn)- 保持一致性：使用统一的配色和样式
- 动画适度：动画时长控制在150-300ms
- 响应式设计：确保各种窗口大小下都能正常显示
- 可访问性：保持足够的对比度，支持键盘导航
- 性能优化：避免过多同时运行的动画
A: 点击活动栏底部的设置按钮，选择主题选项。
A: 在设置中可以关闭动画效果，或减少动画时长。
A: 修改src/theme/vscode_theme.py中的颜色常量，重启应用即可。
A: 点击活动栏中已激活的按钮，或使用快捷键Ctrl+B。
- 2025-12-29：完成VSCode风格UI重构
- 实现活动栏、状态栏组件
- 添加VSCode配色方案
- 实现动画系统
- 更新编辑器语法高亮
如果您对UI有任何建议或发现问题，欢迎：
- 提交Issue到GitHub仓库
- 发送邮件至开发团队
- 在讨论区发表意见
注意：本文档描述的是最新版本的UI设计。如果您使用的是旧版本，部分功能可能有所不同。建议更新到最新版本以获得最佳体验。