Executive Manager - Elegant Task Management

Executive Manager - 优雅的任务管理

)

这是一款基于 React 和 Vite 构建的精致任务管理 Web 应用，采用独特的高端设计，搭配中性色调的浅色配色和优雅的深色字体。

🚀 在线演示

• 生产环境：https://stargrrlmoonlight.github.io/SettingUpMcpServers

功能

• ✨ 优雅设计：中性色调的浅色配色，搭配精致的字体
• 📱 响应式设计：移动优先的设计，在所有设备上都能呈现出色效果
• 🎯 任务管理：添加、编辑、完成和删除任务
• 📅 截止日期：设置和跟踪截止日期，并检测和标记逾期任务
• ⭐ 优先级：通过视觉徽标按高、中或低优先级整理任务
• 🔄 智能排序：按优先级、截止日期、字母顺序或创建日期对任务排序
• 🔍 筛选：查看所有任务、进行中的任务或已完成的任务
• 💾 数据持久化：任务会自动保存到 localStorage
• 💫 流畅动画：细腻的过渡效果和悬停效果
• ♿ 无障碍：合理的对比度和键盘导航

设计理念

应用采用极简设计风格，包括：

• 中性色调（浅灰色、米白色、柔和的暖色调）
• 古典深色字体（标题使用 Crimson Text，正文使用 Inter）
• 清晰的间距和字体层级
• 柔和的阴影和优雅的间距
• 现代 UI 组件与精致的交互效果

技术栈

• React - 现代 UI 库，采用函数组件和 Hooks
• Vite - 快速构建工具和开发服务器
• CSS3 - 使用 CSS 变量和现代技术进行自定义样式设计
• Google Fonts - 使用 Crimson Text 和 Inter 实现优雅的排版

🔄 高级双流程 CI/CD 工作流

本项目采用先进的双流程 CI/CD 系统，通过智能优化将性能提升约 60%：

优化的测试、构建和部署流水线

• 双流程架构：将快速 PR 测试与全面的生产工作流分开
• 智能性能优化：通过智能流程分离和缓存，执行速度提升约 60%
• 矩阵测试：在 Node.js 18.x 和 20.x 上并行测试，并优化依赖项
• 7 层保护机制：全面防止无限循环并实现错误恢复
• 质量门禁：ESLint 代码检查、带覆盖率统计的自动化测试、无障碍验证
• GitHub Pages 部署：所有测试通过后自动部署并进行运行状况验证
• 发布管理：采用语义化版本控制，自动生成构建产物（.tar.gz、.zip）
• 覆盖率智能管理：自动更新 README 徽章，显示实时覆盖率百分比

工作流功能

• 流程 1（PR 测试）：快速通过质量门禁，即时向开发者反馈
• 流程 2（生产环境）：合并后执行完整的构建、部署和发布流水线
• 自动恢复：自我修复机制，并具备全面的错误处理能力
• 状态验证：通过多层验证防止部署问题
• 分支保护：必需的状态检查确保代码质量，并集成 GitHub Copilot

开始使用

前提条件

• Node.js（v16 或更高版本）
• npm 或 yarn

安装

1. 克隆仓库

2. 安装依赖：

   npm install
   

3. 启动开发服务器：

   npm run dev
   

4. 打开浏览器并访问 http://localhost:5173

🤝 参与贡献

欢迎贡献！请参阅我们的贡献指南，了解如何开始：

• 🔄 开发工作流 - 完整的开发流程和 GitHub Copilot 集成
• 📋 贡献指南 - 面向贡献者的完整指南
• 🛠 开发环境设置 - 详细的设置说明
• 🧪 测试指南 - 测试框架和覆盖率要求
• 🚀 部署指南 - CI/CD 流水线和版本发布管理
• 📝 拉取请求模板 - PR 指南

贡献者快速入门

1. 查看问题：浏览未解决的问题
2. 复刻并克隆：复刻仓库并克隆你的复刻版本
3. 创建分支：git checkout -b feature/issue-{number}-{description}
4. 进行更改：遵循我们的代码规范和设计指南
5. 测试：确保你的更改在所有设备上正常运行
6. 提交 PR：创建拉取请求并引用相关问题

开发工作流

我们采用 GitHub Flow，并以问题为驱动进行开发：

• 每项更改都从 GitHub 问题开始
• 所有开发工作都使用功能分支
• 合并前，拉取请求必须经过 GitHub Copilot 审查
• 保持整洁的提交历史，并采用约定式提交
• 通过 CI/CD 质量检查门禁保护分支

📖 查看 WORKFLOW.md，了解完整的工作流详情和 GitHub Copilot 集成

🎯 当前路线图

最近已完成

• ✅ 截止日期和优先级 - 通过视觉指示器和逾期检测，帮助用户管理时间并保持专注

优先功能

• 🏷️ 类别和标签 - 按项目或上下文整理任务
• 🎯 拖放重新排序 - 通过直观方式排列任务优先级

请查看我们的问题，了解详细的功能请求和错误报告。

构建生产版本

npm run build

构建文件将位于 dist 目录中。

项目结构

src/
├── components/
│   ├── Header.jsx         # Application header with title
│   ├── TodoList.jsx       # Main todo list container
│   ├── TodoItem.jsx       # Individual todo item
│   ├── AddTodo.jsx        # Add new todo form
│   ├── SaveIndicator.jsx  # Visual save confirmation
│   └── *.css              # Component-specific styles
├── hooks/
│   └── useLocalStorage.js # Custom hook for localStorage management
├── utils/
│   └── localStorage.js    # LocalStorage utilities and constants
├── App.jsx                # Main application component
├── App.css                # Global application styles
├── index.css              # Global CSS variables and reset
└── main.jsx               # Application entry point

数据持久化

你的任务会自动保存到浏览器的 localStorage 中，因此会在不同会话之间保留。应用包含以下功能：

• 自动保存：所有更改都会立即保存
• 视觉反馈：数据保存后会显示一个不显眼的“已保存”提示
• 数据恢复：返回应用时，你的任务将会恢复
• 向后兼容：现有任务会自动迁移，以支持新功能
• 开发实用工具：使用浏览器控制台命令管理数据

任务管理功能

优先级

任务可设置三个优先级，并显示相应的视觉指示器：

• 高优先级（红色徽章）：需要立即处理的关键任务
• 中优先级（黄色徽章）：重要程度一般的标准任务
• 低优先级（绿色徽章）：有空时可以完成的任务

截止日期和逾期检测

• 创建或编辑任务时设置具体的截止日期
• 以格式化日期显示截止日期
• 逾期检测：超过截止日期的任务会自动显示红色样式和轻微动画的“已逾期”提示
• 按截止日期对任务排序，优先处理即将到期的任务

智能排序选项

使用多种排序选项整理任务：

• 优先级：高 → 中 → 低
• 截止日期：按截止日期从早到晚排列（没有日期的任务排在最后）
• 字母顺序：按任务文本以 A-Z 顺序排序
• 创建时间：最新任务排在最前面（默认）

增强编辑

双击任意任务即可编辑：

• 更新任务文本
• 更改优先级
• 修改截止日期
• 所有更改都会自动保存

开发控制台实用工具

在开发模式下运行时，你可以使用以下控制台命令：

// Clear all stored data
todoUtils.clearAllData()

// Export your data as JSON
const backup = todoUtils.exportData()

// Import data from a backup
todoUtils.importData(backup)

// View current todos
todoUtils.getCurrentTodos()

// Show help
todoUtils.help()

贡献

1. Fork 此仓库
2. 创建功能分支
3. 进行修改
4. 充分测试
5. 提交拉取请求

许可证

MIT 许可证——欢迎将此项目用于自己的用途。