1. 设计原则
1.1 核心设计理念
DevMind插件的用户界面设计遵循以下核心理念：
- 简洁高效：界面简洁明了，操作流程顺畅，减少用户认知负担
- 直观易用：功能布局合理，操作逻辑清晰，用户无需学习即可上手
- 视觉层次：通过色彩、排版、空间等元素建立清晰的视觉层次
- 响应式设计：适配不同屏幕尺寸和IDE窗口大小
- 一致性：保持界面元素和交互模式的一致性
- 可访问性：遵循可访问性标准，确保所有用户都能正常使用
1.2 设计风格
DevMind插件采用现代极简主义 设计风格，结合专业开发工具的特点：
- 主色调：深蓝色 (#1E3A8A) - 代表专业、可靠
- 辅助色 ：
- 绿色 (#10B981) - 用于成功状态和进度
- 橙色 (#F59E0B) - 用于警告和提醒
- 红色 (#EF4444) - 用于错误和严重问题
- 紫色 (#8B5CF6) - 用于AI相关功能
- 中性色 ：
- 白色 (#FFFFFF) - 背景
- 浅灰 (#F3F4F6) - 次级背景
- 中灰 (#9CA3AF) - 次要文本
- 深灰 (#1F2937) - 主要文本
- 字体 ：
- 主字体：Inter - 现代、清晰、易读
- 代码字体：Fira Code - 专业代码字体，支持连字
- 间距：使用4px网格系统，确保间距的一致性
- 圆角：统一使用8px圆角，营造现代感
- 阴影：使用轻微阴影，增强层次感但不过度
2. 界面布局
2.1 整体布局
DevMind插件在IDE中的布局分为以下几个部分：
┌─────────────────────────────────────────────────────┐
│ IDE顶部栏 │
├─────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌───────────────────────────────────┐ │
│ │ │ │ │ │
│ │ 侧边栏 │ │ │ │
│ │ │ │ │ │
│ │ DevMind │ │ 主视图区域 │ │
│ │ │ │ │ │
│ │ 导航 │ │ │ │
│ │ │ │ │ │
│ └─────────┘ └───────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ IDE状态栏 │
└─────────────────────────────────────────────────────┘2.2 侧边栏
2.2.1 侧边栏结构
┌─────────────────────────────────────────┐
│ DevMind侧边栏 │
├─────────────────────────────────────────┤
│ 🎯 快速操作 │
│ ├───────────────────────────────────┤ │
│ │ • 创建任务 │ │
│ │ • 创建需求 │ │
│ │ • 创建Bug │ │
│ │ • 创建知识 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🤖 AI分析 │
│ ├───────────────────────────────────┤ │
│ │ • 🏗️ 架构Review │ │
│ │ • 💰 技术债梳理 │ │
│ │ • 📋 任务推荐 │ │
│ │ • ⚡ 优化建议 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ ⏰ 最近活动 │
│ ├───────────────────────────────────┤ │
│ │ • 任务更新: 实现登录功能 │ │
│ │ • Bug创建: 登录失败 │ │
│ │ • 需求批准: 用户注册功能 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 📂 项目文档 │
│ ├───────────────────────────────────┤ │
│ │ • 项目配置文件 │ │
│ │ • 需求文档 │ │
│ │ • 任务文档 │ │
│ │ • 知识库文档 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.2.2 侧边栏交互
- 展开/收起：点击侧边栏图标或使用快捷键展开/收起侧边栏
- 快速操作：点击快速操作项直接打开相应的创建表单
- AI分析：点击AI分析项触发相应的分析功能
- 最近活动：显示最近的项目活动，点击可查看详情
- 项目文档：显示项目相关文档，点击可打开查看
2.3 主视图区域
主视图区域根据当前选择的功能模块显示不同的内容，主要包括：
2.3.1 项目概览
┌─────────────────────────────────────────┐
│ DevMind主视图 │
├─────────────────────────────────────────┤
│ 项目概览 │
│ ┌───────────────────────────────────┐ │
│ │ 项目名称: 示例项目 │ │
│ │ 进度: ████████░░ 80% │ │
│ │ 需求: 12/15 | 任务: 23/30 │ │
│ │ Bug: 5 | 知识条目: 18 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ [🤖 AI助手] [⚙设置] │
├─────────────────────────────────────────┤
│ [📋需求] [✅任务] [🐛Bug] [📚知识] [🤖AI]│
├─────────────────────────────────────────┤
│ 当前视图内容... │
│ ┌───────────────────────────────────┐ │
│ │ 📋 需求卡片 │ │
│ │ 用户登录功能 │ │
│ │ 状态: 进行中 | 优先级: 高 │ │
│ │ 关联任务: 3个 | 关联Bug: 1个 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.2 需求管理
┌─────────────────────────────────────────┐
│ 需求管理 │
├─────────────────────────────────────────┤
│ [+ 新建需求] [🤖 AI分析] [🔍 搜索] │
├─────────────────────────────────────────┤
│ [全部] [草稿] [已批准] [进行中] [已完成]│
├─────────────────────────────────────────┤
│ ┌───────────────────────────────────┐ │
│ │ 📋 REQ-001: 用户登录功能 │ │
│ │ 状态: 进行中 | 优先级: 高 │ │
│ │ 类型: 功能需求 | 工作量: 5人天 │ │
│ │ 关联任务: 3个 | 关联Bug: 1个 │ │
│ │ 截止日期: 2026-03-15 │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 📋 REQ-002: 用户注册功能 │ │
│ │ 状态: 已批准 | 优先级: 高 │ │
│ │ 类型: 功能需求 | 工作量: 4人天 │ │
│ │ 关联任务: 2个 | 关联Bug: 0个 │ │
│ │ 截止日期: 2026-03-20 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.3 任务跟踪
┌─────────────────────────────────────────┐
│ 任务管理 │
├─────────────────────────────────────────┤
│ [+ 新建任务] [🤖 AI分析] [🔍 搜索] │
├─────────────────────────────────────────┤
│ [全部] [待办] [进行中] [已完成] [我的] │
├─────────────────────────────────────────┤
│ ┌───────────────────────────────────┐ │
│ │ ✅ TASK-001: 实现登录API │ │
│ │ 状态: 进行中 | 优先级: 高 │ │
│ │ 负责人: 张三 | 截止日期: 2026-03-10 │ │
│ │ 关联需求: REQ-001 │ │
│ │ 预估时间: 2人天 | 实际: 1.5人天 │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ ✅ TASK-002: 设计登录界面 │ │
│ │ 状态: 待办 | 优先级: 中 │ │
│ │ 负责人: 李四 | 截止日期: 2026-03-12 │ │
│ │ 关联需求: REQ-001 │ │
│ │ 预估时间: 1人天 | 实际: 0人天 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.4 缺陷管理
┌─────────────────────────────────────────┐
│ 缺陷管理 │
├─────────────────────────────────────────┤
│ [+ 新建Bug] [🤖 AI分析] [🔍 搜索] │
├─────────────────────────────────────────┤
│ [全部] [新建] [已分配] [处理中] [已修复]│
├─────────────────────────────────────────┤
│ ┌───────────────────────────────────┐ │
│ │ 🐛 BUG-001: 登录失败 │ │
│ │ 状态: 处理中 | 严重程度: 严重 │ │
│ │ 负责人: 张三 | 发现日期: 2026-03-05 │ │
│ │ 关联需求: REQ-001 │ │
│ │ 关联任务: TASK-001 │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 🐛 BUG-002: 密码重置失败 │ │
│ │ 状态: 已分配 | 严重程度: 一般 │ │
│ │ 负责人: 李四 | 发现日期: 2026-03-06 │ │
│ │ 关联需求: REQ-001 │ │
│ │ 关联任务: TASK-003 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.5 知识库
┌─────────────────────────────────────────┐
│ 知识库 │
├─────────────────────────────────────────┤
│ [+ 新建知识] [🤖 AI提取] [🔍 搜索] │
├─────────────────────────────────────────┤
│ [全部] [📋决策] [💡经验] [🔧模式] [🛠实践]│
├─────────────────────────────────────────┤
│ ┌───────────────────────────────────┐ │
│ │ 📋 技术决策: 选择React框架 │ │
│ │ 分类: 技术选型 | 标签: React,前端 │ │
│ │ 作者: 王五 | 创建日期: 2026-02-20 │ │
│ │ 关联需求: REQ-001,REQ-002 │ │
│ │ 摘要: 选择React作为前端框架，生态 │ │
│ │ 成熟，团队熟悉，开发效率高 │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 💡 经验教训: 密码加密实践 │ │
│ │ 分类: 安全 | 标签: 密码,加密,安全 │ │
│ │ 作者: 张三 | 创建日期: 2026-03-01 │ │
│ │ 关联Bug: BUG-001 │ │
│ │ 摘要: 密码必须使用bcrypt等安全算法 │ │
│ │ 加密存储，避免明文或简单哈希 │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.6 AI助手
┌─────────────────────────────────────────┐
│ 🤖 AI助手 │
├─────────────────────────────────────────┤
│ 💬 对话区域 │
│ ┌───────────────────────────────────┐ │
│ │ 用户: 项目当前进度如何？ │ │
│ │ AI: 项目整体进度为80%， │ │
│ │ 已完成23/30个任务， │ │
│ │ 剩余7个任务预计2周完成。 │ │
│ │ 当前高优先级任务： │ │
│ │ - 实现用户登录功能 (进行中) │ │
│ │ - 支付模块 (待开始) │ │
│ │ │ │
│ │ 用户: 有什么风险需要注意？ │ │
│ │ AI: 基于项目分析，发现以下风险： │ │
│ │ 1. 登录安全性 (高) │ │
│ │ 2. 性能瓶颈 (中) │ │
│ │ 建议：优先处理安全性问题 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ [输入问题...] [发送] │
├─────────────────────────────────────────┤
│ 🎯 快捷操作 │
│ [🏗️ 架构Review] [💰 技术债梳理] │ │
│ [📋 任务推荐] [⚡ 优化建议] │ │
│ [分析项目进度] [生成报告] [提取知识] │ │
└─────────────────────────────────────────┘2.3.7 项目架构Review
┌─────────────────────────────────────────┐
│ 🏗️ 项目架构Review │
├─────────────────────────────────────────┤
│ [🔄 重新分析] [📊 生成报告] [⚙设置]│
├─────────────────────────────────────────┤
│ 分析进度: ████████████ 100% 完成 │
├─────────────────────────────────────────┤
│ 📊 架构概览 │
│ ┌───────────────────────────────────┐ │
│ │ 代码结构评分: 85/100 (良好) │ │
│ │ 模块数量: 12个 │ │
│ │ 依赖关系: 复杂度中等 │ │
│ │ 架构模式: MVC + 分层架构 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ ⚠️ 架构问题 (3个) │
│ ┌───────────────────────────────────┐ │
│ │ 🔴 高优先级: 循环依赖 │ │
│ │ 位置: src/auth/auth.service.ts │ │
│ │ 建议: 重构为依赖注入模式 │ │
│ │ [创建修复任务] │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 🟡 中优先级: 模块职责不清 │ │
│ │ 位置: src/utils/ │ │
│ │ 建议: 拆分为独立模块 │ │
│ │ [创建修复任务] │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 💡 优化建议 │
│ ┌───────────────────────────────────┐ │
│ │ 1. 引入状态管理库 │ │
│ │ 2. 实现服务层抽象 │ │
│ │ 3. 添加缓存层 │ │
│ │ [一键创建所有优化任务] │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.8 技术债梳理
┌─────────────────────────────────────────┐
│ 💰 技术债梳理 │
├─────────────────────────────────────────┤
│ [🔄 重新扫描] [📊 生成报告] [⚙设置]│
├─────────────────────────────────────────┤
│ 扫描进度: ████████████ 100% 完成 │
├─────────────────────────────────────────┤
│ 📊 技术债统计 │
│ ┌───────────────────────────────────┐ │
│ │ 总计: 15项技术债 │ │
│ │ 🔴 严重: 3项 │ │
│ │ 🟡 中等: 7项 │ │
│ │ 🟢 轻微: 5项 │ │
│ │ 预计修复成本: 40小时 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🔴 严重技术债 (3项) │
│ ┌───────────────────────────────────┐ │
│ │ 1. 使用过时的API │ │
│ │ 位置: src/api/user.ts:45 │ │
│ │ 影响: 安全风险 │ │
│ │ 修复成本: 4小时 │ │
│ │ [发起解决方案整理] [标记已修复] │ │
│ └───────────────────────────────────┘ │
│ ┌────────────────────────────────── │ │
│ │ 2. 硬编码配置 │ │
│ │ 位置: src/config/index.ts:12 │ │
│ │ 影响: 可维护性差 │ │
│ │ 修复成本: 2小时 │ │
│ │ [发起解决方案整理] [标记已修复] │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🎯 优先修复建议 │
│ ┌───────────────────────────────────┐ │
│ │ 基于影响和成本，建议优先修复： │ │
│ │ 1. 过时API (安全风险) │ │
│ │ 2. 硬编码配置 (可维护性) │ │
│ │ 3. 缺少错误处理 (稳定性) │ │
│ │ [一键创建修复任务] │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.9 智能任务推荐
┌─────────────────────────────────────────┐
│ 📋 智能任务推荐 │
├─────────────────────────────────────────┤
│ [🔄 刷新推荐] [⚙ 推荐设置] │
├─────────────────────────────────────────┤
│ 📊 项目状态 │
│ ┌───────────────────────────────────┐ │
│ │ 进度: 80% | 剩余任务: 7个 │ │
│ │ 技术债: 15项 | 待修复: 3项 │ │
│ │ 最近变更: 5个文件 │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🎯 推荐任务 (按优先级排序) │
│ ┌───────────────────────────────────┐ │
│ │ 🔴 高优先级 │ │
│ │ 1. 修复过时API安全问题 │ │
│ │ 理由: 安全风险，影响范围大 │ │
│ │ 预估时间: 4小时 │ │
│ │ [一键采纳] [查看详情] │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 2. 实现用户注册功能 │ │
│ │ 理由: 项目进度关键路径 │ │
│ │ 预估时间: 8小时 │ │
│ │ [一键采纳] [查看详情] │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 🟡 中优先级 │ │
│ │ 3. 重构认证模块 │ │
│ │ 理由: 架构Review建议 │ │
│ │ 预估时间: 12小时 │ │
│ │ [一键采纳] [查看详情] │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 📈 推荐依据 │
│ ┌───────────────────────────────────┐ │
│ │ • 项目进度分析 (40%) │ │
│ │ • 技术债优先级 (30%) │ │
│ │ • 代码变更关联 (20%) │ │
│ │ • 用户工作习惯 (10%) │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.3.10 代码优化建议
┌─────────────────────────────────────────┐
│ ⚡ 代码优化建议 │
├─────────────────────────────────────────┤
│ [🔄 重新分析] [📊 生成报告] [⚙设置]│
├─────────────────────────────────────────┤
│ 分析进度: ████████████ 100% 完成 │
├─────────────────────────────────────────┤
│ 📊 优化统计 │
│ ┌───────────────────────────────────┐ │
│ │ 总计: 23条建议 │ │
│ │ 🔴 严重: 5条 │ │
│ │ 🟡 中等: 12条 │ │
│ │ 🟢 轻微: 6条 │ │
│ │ 预计提升性能: 30% │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🔴 严重问题 (5条) │
│ ┌───────────────────────────────────┐ │
│ │ 1. SQL注入漏洞 │ │
│ │ 位置: src/api/user.ts:78 │ │
│ │ 类型: 安全漏洞 │ │
│ │ 建议: 使用参数化查询 │ │
│ │ [一键修复] [创建修复任务] │ │
│ └───────────────────────────────────┘ │
│ ┌───────────────────────────────────┐ │
│ │ 2. 内存泄漏 │ │
│ │ 位置: src/utils/cache.ts:23 │ │
│ │ 类型: 性能问题 │ │
│ │ 建议: 添加清理逻辑 │ │
│ │ [一键修复] [创建修复任务] │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 🟡 中等问题 (12条) │
│ ┌───────────────────────────────────┐ │
│ │ 3. 未使用的导入 │ │
│ │ 位置: src/components/ │ │
│ │ 类型: 代码规范 │ │
│ │ 建议: 清理未使用导入 │ │
│ │ [一键修复] [创建修复任务] │ │
│ └───────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 💡 性能优化建议 │
│ ┌───────────────────────────────────┐ │
│ │ 1. 添加图片懒加载 │ │
│ │ 2. 实现虚拟滚动 │ │
│ │ 3. 优化数据库查询 │ │
│ │ 4. 添加缓存机制 │ │
│ │ [一键创建所有优化任务] │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘2.4 状态栏
2.4.1 状态栏布局
在IDE状态栏中，DevMind插件显示以下信息：
┌─────────────────────────────────────────────────────────┐
│ 当前任务: 实现用户登录功能 [⏸暂停] | 待办: 12 | 进行: 5 │
└─────────────────────────────────────────────────────────┘2.4.2 状态栏交互
- 当前任务：显示当前正在进行的任务，点击可查看任务详情
- 暂停/继续：点击暂停/继续按钮可以暂停或继续当前任务
- 任务统计：显示待办和进行中的任务数量，点击可打开任务管理视图
3. 交互设计
3.1 核心交互流程
3.1.1 智能需求分析交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击"新建需求" 显示需求表单 输入需求描述 点击"🤖 AI分析" 调用AI分析API 发送需求描述 返回分析结果 显示分析结果 自动填充需求表单 查看并调整AI建议 点击"保存" 保存需求 返回保存结果 显示保存成功提示
3.1.2 代码关联分析交互
AI服务 DevMind核心 IDE 用户 AI服务 DevMind核心 IDE 用户 打开代码文件 选中代码片段 右键选择"关联到需求/任务" 调用代码关联API 发送代码片段 返回匹配结果 显示匹配的需求/任务 选择要关联的需求/任务 点击"确认" 建立关联关系 返回关联结果 显示关联成功提示
3.1.3 智能Bug分析交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击"新建Bug" 显示Bug表单 输入Bug描述和复现步骤 点击"🤖 AI分析" 调用Bug分析API 发送Bug信息 返回分析结果 显示分析结果和建议 自动填充Bug表单 查看并调整AI建议 点击"保存" 保存Bug 返回保存结果 显示保存成功提示
3.1.4 AI问答交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 打开"🤖 AI助手" 输入问题 点击"发送" 调用AI问答API 发送问题和上下文 返回回答 显示AI回答 展示回答结果 可以进一步追问
3.1.5 智能推荐交互
AI服务 DevMind核心 IDE 用户 AI服务 DevMind核心 IDE 用户 打开文件或查看代码 触发上下文分析 发送当前上下文 返回推荐结果 显示推荐的任务、需求、知识 点击推荐项 显示推荐项详情 可以直接处理推荐的任务
3.1.6 项目架构Review交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击侧边栏"🏗️ 架构Review" 触发架构分析 发送项目代码 返回分析结果 显示分析进度 显示架构分析报告 查看详细分析结果 点击"创建修复任务" 创建修复任务 返回创建结果 显示任务创建成功提示
3.1.7 技术债梳理交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击侧边栏"💰 技术债梳理" 触发技术债扫描 发送项目代码 返回技术债分析结果 显示扫描进度 显示技术债分析报告 查看技术债详情 点击"发起解决方案整理" 整理解决方案 返回解决方案 显示解决方案 点击"一键创建修复任务" 创建修复任务 返回创建结果 显示任务创建成功提示
3.1.8 智能任务推荐交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击侧边栏"📋 任务推荐" 触发任务推荐 发送项目状态和上下文 返回推荐任务 显示推荐结果 显示推荐任务列表 查看推荐任务详情 点击"一键采纳" 创建推荐任务 返回创建结果 显示任务创建成功提示
3.1.9 代码优化建议交互
AI服务 DevMind核心 UI组件 用户 AI服务 DevMind核心 UI组件 用户 点击侧边栏"⚡ 优化建议" 触发代码分析 发送项目代码 返回优化建议 显示分析进度 显示优化建议报告 查看优化建议详情 点击"一键修复" 执行修复 返回修复结果 显示修复成功提示 点击"创建修复任务" 创建修复任务 返回创建结果 显示任务创建成功提示
3.2 微交互设计
3.2.1 按钮交互
-
主按钮：
- 默认状态：蓝色背景，白色文字
- hover状态：深蓝色背景，白色文字
- 点击状态：更深蓝色背景，白色文字
- 禁用状态：浅灰色背景，中灰色文字
-
次要按钮：
- 默认状态：白色背景，蓝色边框，蓝色文字
- hover状态：浅蓝色背景，蓝色边框，深蓝色文字
- 点击状态：中蓝色背景，蓝色边框，白色文字
- 禁用状态：白色背景，浅灰色边框，中灰色文字
-
图标按钮：
- 默认状态：白色背景，中灰色图标
- hover状态：浅灰色背景，蓝色图标
- 点击状态：中灰色背景，深蓝色图标
- 禁用状态：白色背景，浅灰色图标
3.2.2 卡片交互
- 默认状态：白色背景，轻微阴影
- hover状态：白色背景，增强阴影，轻微上浮效果
- 点击状态：白色背景，更强阴影，上浮效果更明显
- 选中状态：白色背景，蓝色边框，增强阴影
3.2.3 表单交互
-
输入框：
- 默认状态：白色背景，浅灰色边框
- focus状态：白色背景，蓝色边框，轻微阴影
- 错误状态：白色背景，红色边框，红色文字提示
- 成功状态：白色背景，绿色边框
-
下拉菜单：
- 默认状态：白色背景，浅灰色边框
- hover状态：白色背景，蓝色边框
- 打开状态：白色背景，蓝色边框，下拉列表显示
-
复选框/单选框：
- 未选中状态：白色背景，浅灰色边框
- 选中状态：蓝色背景，白色对勾/圆点
- hover状态：轻微阴影
3.2.4 进度条交互
- 默认状态：灰色背景，蓝色进度条
- 动画效果：进度变化时使用平滑过渡动画
- 不同状态颜色 ：
- 正常进度：蓝色
- 成功：绿色
- 警告：橙色
- 错误：红色
3.2.5 通知交互
- 成功通知：绿色背景，白色文字，成功图标
- 警告通知：橙色背景，白色文字，警告图标
- 错误通知：红色背景，白色文字，错误图标
- 信息通知：蓝色背景，白色文字，信息图标
- 动画效果：从顶部滑入，显示一段时间后自动消失
3.3 响应式设计
3.3.1 布局响应式
- 大屏幕（1200px+）：完整显示所有元素，多列布局
- 中屏幕（768px-1199px）：调整布局，减少列数
- 小屏幕（<768px）：单列布局，折叠部分元素
3.3.2 内容响应式
- 文本：根据屏幕大小调整字体大小
- 间距：根据屏幕大小调整间距
- 图标：根据屏幕大小调整图标大小
- 菜单：在小屏幕上折叠为汉堡菜单
3.3.3 交互响应式
- 触摸设备：增大点击区域，优化触摸交互
- 键盘导航：支持键盘导航，确保可访问性
- 屏幕阅读器：支持屏幕阅读器，确保可访问性
4. 视觉设计元素
4.1 图标系统
DevMind插件使用一套统一的图标系统，包括：
-
功能图标：
- 📋 需求
- ✅ 任务
- 🐛 Bug
- 📚 知识
- 🤖 AI
- 🏗️ 架构
- 💰 技术债
- ⚡ 优化
- 🎯 快速操作
- ⏰ 最近活动
- 📂 项目文档
-
状态图标：
- 🔴 严重/错误
- 🟡 警告/中等
- 🟢 成功/轻微
- 🟣 信息/AI
-
操作图标：
- ➕ 新建
- ✏️ 编辑
- 🗑️ 删除
- 🔍 搜索
- 🔄 刷新
- 📊 生成报告
- ⚙️ 设置
4.2 色彩系统
DevMind插件使用以下色彩系统，确保与VSCode主题保持一致：
4.2.1 VSCode主题集成
为了与VSCode主题保持一致，DevMind插件采用以下策略：
- 动态色彩获取：通过VSCode API获取当前主题的色彩变量
- 主题适配：根据当前VSCode主题自动调整界面颜色
- 语义化色彩：使用语义化色彩名称，而非固定色值
- 主题切换响应：监听VSCode主题变化事件，实时更新界面颜色
4.2.2 主题色彩映射
| 语义化色彩 | VSCode主题变量 | 用途 |
|---|---|---|
| primary | editor.foreground |
主要文本颜色 |
| secondary | editor.inactiveSelectionBackground |
次要文本颜色 |
| background | editor.background |
主要背景颜色 |
| surface | sideBar.background |
卡片和面板背景 |
| border | editorLineNumber.foreground |
边框和分割线 |
| accent | editorCursor.foreground |
强调色，用于活动状态 |
| success | diffEditor.insertedLineBackground |
成功状态 |
| warning | editorWarning.foreground |
警告状态 |
| error | editorError.foreground |
错误状态 |
| info | editorInfo.foreground |
信息状态 |
| ai | purple (基于主题色调调整) |
AI相关功能 |
4.2.3 实现方案
typescript
// 获取VSCode主题颜色的实现示例
import * as vscode from 'vscode';
/**
* 获取当前VSCode主题的颜色
*/
export function getThemeColors(): Record<string, string> {
const theme = vscode.window.activeColorTheme;
const colors = {
// 文本颜色
primary: vscode.workspace.getConfiguration('workbench').get('colorCustomizations')?.['[Default Dark+]']?.['editor.foreground'] ||
theme.tokenColors.find(t => t.scope === 'keyword')?.settings.foreground ||
'#FFFFFF',
// 背景颜色
background: vscode.workspace.getConfiguration('workbench').get('colorCustomizations')?.['[Default Dark+]']?.['editor.background'] ||
theme.colors['editor.background'] ||
'#1E1E1E',
// 强调色
accent: vscode.workspace.getConfiguration('workbench').get('colorCustomizations')?.['[Default Dark+]']?.['editorCursor.foreground'] ||
theme.colors['editorCursor.foreground'] ||
'#FFFFFF',
// 状态颜色
success: theme.colors['diffEditor.insertedLineBackground'] || '#0E639C',
warning: theme.colors['editorWarning.foreground'] || '#FFCC00',
error: theme.colors['editorError.foreground'] || '#F48771',
info: theme.colors['editorInfo.foreground'] || '#64D2FF',
// 边框颜色
border: theme.colors['editorLineNumber.foreground'] || '#858585',
// 卡片背景
surface: theme.colors['sideBar.background'] || '#252526',
};
return colors;
}
/**
* 监听主题变化
*/
export function watchThemeChanges(callback: () => void): vscode.Disposable {
return vscode.workspace.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('workbench.colorTheme')) {
callback();
}
});
}4.2.4 主题适配策略
- 亮色主题：在亮色主题下，自动调整色彩对比度，确保文本清晰可读
- 暗色主题：在暗色主题下，使用更深的背景色和适当的文本对比度
- 高对比度主题：支持VSCode的高对比度主题，确保可访问性
- 自定义主题：适配用户自定义的VSCode主题，提取关键色彩变量
4.2.5 渐变色（主题感知）
| 渐变名称 | 实现方式 | 用途 |
|---|---|---|
| 主渐变 | 基于当前主题的accent色生成 | 主按钮和强调元素 |
| AI渐变 | 基于当前主题的紫色调生成 | AI相关按钮和元素 |
| 成功渐变 | 基于当前主题的success色生成 | 成功状态和进度 |
| 警告渐变 | 基于当前主题的warning色生成 | 警告和提醒 |
| 错误渐变 | 基于当前主题的error色生成 | 错误和严重问题 |
4.3 字体系统
DevMind插件使用以下字体系统：
4.3.1 字体家族
| 字体名称 | 类型 | 用途 |
|---|---|---|
| Inter | 无衬线 | 主字体，用于界面文本 |
| Fira Code | 等宽 | 代码字体，用于代码显示 |
4.3.2 字体大小
| 字体大小 | 行高 | 用途 |
|---|---|---|
| 24px | 32px | 大标题 |
| 20px | 28px | 中标题 |
| 16px | 24px | 小标题和正文 |
| 14px | 20px | 次级文本 |
| 12px | 16px | 注释和辅助文本 |
4.3.3 字重
| 字重 | 用途 |
|---|---|
| 300 | 轻量级文本 |
| 400 | 正常文本 |
| 500 | 中等强调文本 |
| 600 | 强强调文本 |
| 700 | 标题和重要按钮 |
4.4 间距系统
DevMind插件使用4px网格系统，确保间距的一致性：
| 间距值 | 用途 |
|---|---|
| 4px | 小间距，用于紧凑元素 |
| 8px | 基础间距，用于相邻元素 |
| 12px | 中等间距，用于组内元素 |
| 16px | 标准间距，用于区域分隔 |
| 24px | 大间距，用于主要区域 |
| 32px | 超大间距，用于页面布局 |
4.5 动画系统
DevMind插件使用以下动画系统：
4.5.1 过渡动画
| 动画名称 | 持续时间 | 缓动函数 | 用途 |
|---|---|---|---|
| 快速过渡 | 150ms | ease-out | 快速交互，如悬停效果 |
| 标准过渡 | 250ms | ease-in-out | 标准交互，如模态框显示/隐藏 |
| 慢速过渡 | 350ms | ease-in-out | 复杂交互，如页面切换 |
4.5.2 关键动画
| 动画名称 | 描述 | 用途 |
|---|---|---|
| 淡入 | 从透明到不透明 | 元素显示 |
| 淡出 | 从不透明到透明 | 元素隐藏 |
| 滑入 | 从边缘滑入 | 侧边栏和模态框 |
| 滑出 | 向边缘滑出 | 侧边栏和模态框 |
| 弹跳 | 轻微弹跳效果 | 成功提示和重要操作 |
| 旋转 | 360度旋转 | 加载图标和刷新按钮 |
| 脉冲 | 缩放脉冲效果 | 警告和提醒 |
5. 可访问性设计
5.1 键盘导航
- Tab键导航：所有可交互元素都支持Tab键导航
- 快捷键：为常用功能提供快捷键
- 键盘陷阱：避免键盘陷阱，确保用户可以通过键盘离开任何元素
- 焦点样式：为所有可交互元素提供清晰的焦点样式
5.2 屏幕阅读器
- ARIA标签：为所有非文本元素提供ARIA标签
- ARIA角色：为所有元素提供适当的ARIA角色
- ARIA状态：为所有状态变化提供ARIA状态
- 语义化HTML：使用语义化HTML元素，确保屏幕阅读器正确理解
5.3 颜色对比度
- 文本对比度：确保文本与背景的对比度至少为4.5:1
- UI元素对比度：确保UI元素与背景的对比度至少为3:1
- 状态指示：使用多种方式指示状态，不仅仅依赖颜色
5.4 响应式设计
- 触摸目标：确保所有可交互元素的触摸目标至少为44x44像素
- 文本大小：支持文本大小调整，确保在不同文本大小下界面仍然可用
- 屏幕方向：支持不同屏幕方向，确保在横屏和竖屏下都可用
6. 设计实现
6.1 技术实现
DevMind插件的UI实现使用以下技术：
- 前端框架：React 19.0+
- 开发语言：TypeScript 5.0+
- 构建工具：Vite 5.0+
- 状态管理：Zustand 4.0+
- UI组件库：Ant Design 6.0+（主题适配）
- 样式解决方案：SCSS + VSCode主题变量
- 动画库：Framer Motion
- 图标库：Lucide React
- VSCode API：用于主题颜色获取和监听
6.2 组件设计
DevMind插件的UI组件设计遵循以下原则：
- 组件化：将界面拆分为可重用的组件
- 原子设计：从原子组件开始，逐步构建更复杂的组件
- Props设计：为组件设计清晰、合理的Props
- 状态管理：为组件设计合理的状态管理策略
- 样式隔离：使用CSS Modules确保样式隔离
- 主题适配：所有组件支持主题颜色动态调整
6.3 主题集成实现
6.3.1 主题管理服务
typescript
// themeService.ts
import * as vscode from 'vscode';
import { create } from 'zustand';
// 主题状态接口
interface ThemeState {
colors: Record<string, string>;
isDark: boolean;
updateColors: () => void;
}
// 主题状态存储
export const useThemeStore = create<ThemeState>((set) => ({
colors: getThemeColors(),
isDark: vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark,
updateColors: () => {
set({
colors: getThemeColors(),
isDark: vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark
});
}
}));
// 获取主题颜色
function getThemeColors(): Record<string, string> {
const theme = vscode.window.activeColorTheme;
return {
primary: theme.colors['editor.foreground'] || '#FFFFFF',
secondary: theme.colors['editor.inactiveSelectionBackground'] || '#858585',
background: theme.colors['editor.background'] || '#1E1E1E',
surface: theme.colors['sideBar.background'] || '#252526',
border: theme.colors['editorLineNumber.foreground'] || '#858585',
accent: theme.colors['editorCursor.foreground'] || '#FFFFFF',
success: theme.colors['diffEditor.insertedLineBackground'] || '#0E639C',
warning: theme.colors['editorWarning.foreground'] || '#FFCC00',
error: theme.colors['editorError.foreground'] || '#F48771',
info: theme.colors['editorInfo.foreground'] || '#64D2FF',
ai: '#8B5CF6' // AI相关功能的基础色
};
}
// 初始化主题监听
export function initializeThemeListener() {
const disposable = vscode.workspace.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('workbench.colorTheme')) {
useThemeStore.getState().updateColors();
}
});
return disposable;
}6.3.2 主题化组件示例
tsx
// ThemedButton.tsx
import React from 'react';
import { useThemeStore } from './themeService';
interface ThemedButtonProps {
children: React.ReactNode;
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
onClick?: () => void;
}
export function ThemedButton({ children, variant = 'primary', onClick }: ThemedButtonProps) {
const { colors } = useThemeStore();
const getButtonStyle = () => {
switch (variant) {
case 'primary':
return {
backgroundColor: colors.accent,
color: colors.background,
borderColor: colors.accent
};
case 'success':
return {
backgroundColor: colors.success,
color: colors.background,
borderColor: colors.success
};
case 'warning':
return {
backgroundColor: colors.warning,
color: colors.background,
borderColor: colors.warning
};
case 'error':
return {
backgroundColor: colors.error,
color: colors.background,
borderColor: colors.error
};
case 'secondary':
default:
return {
backgroundColor: colors.surface,
color: colors.primary,
borderColor: colors.border
};
}
};
return (
<button
style={{
...getButtonStyle(),
padding: '8px 16px',
borderRadius: '8px',
border: '1px solid',
cursor: 'pointer',
fontFamily: 'inherit',
fontSize: '14px',
fontWeight: 500,
transition: 'all 0.2s ease'
}}
onClick={onClick}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.9';
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1';
}}
>
{children}
</button>
);
}6.4 性能优化
DevMind插件的UI性能优化遵循以下策略：
- 代码分割：使用动态导入实现代码分割
- 组件懒加载：使用React.lazy实现组件懒加载
- 虚拟滚动：对长列表使用虚拟滚动
- 缓存：缓存渲染结果，避免重复渲染
- 减少重绘：使用CSS transform和opacity进行动画，减少重绘
- 主题更新优化：主题切换时只更新必要的组件，避免全量重渲染
7. 总结
DevMind插件的用户界面设计遵循现代、简洁、高效的原则，通过精心的布局、交互和视觉设计，为用户提供直观、易用的项目管理工具。
7.1 设计亮点
- 统一的设计系统：完整的色彩、字体、间距、图标系统，确保界面的一致性
- 清晰的视觉层次：通过色彩、排版、空间等元素建立清晰的视觉层次
- 流畅的交互体验：精心设计的交互流程和微交互，提升用户体验
- 智能的AI集成：AI相关功能的视觉设计，突出AI的智能特性
- 响应式设计：适配不同屏幕尺寸，确保在各种环境下都有良好的体验
- 可访问性：遵循可访问性标准，确保所有用户都能正常使用
7.2 设计目标
通过以上设计，DevMind插件的用户界面旨在实现以下目标：
- 提高效率：直观的界面和流畅的交互，减少用户操作成本
- 增强体验：美观的视觉设计和流畅的动画，提升用户体验
- 突出智能：AI相关功能的视觉设计，突出插件的智能特性
- 建立信任：专业、可靠的视觉设计，建立用户信任
- 促进使用：易用的界面设计，促进用户持续使用
DevMind插件的用户界面设计将随着产品的发展和用户反馈不断优化和改进，确保始终为用户提供最佳的使用体验。