TodoHub - 现代化玻璃拟态待办事项应用

一个基于玻璃拟态设计语言的现代化待办事项管理应用，采用纯前端技术栈构建。

✨ 特性

🎨 设计特色

• 玻璃拟态设计：采用半透明磨砂玻璃效果，营造现代感十足的用户界面
• 低饱和度渐变背景：柔和的色彩搭配，减少视觉疲劳
• 流畅动画效果：丰富的过渡动画和交互反馈
• 响应式设计：完美适配桌面端、平板和移动设备

📋 功能特性

• 多视图模式：看板视图、列表视图、统计视图
• 任务管理：创建、编辑、删除、移动任务
• 拖拽排序：支持拖拽操作改变任务状态
• 标签系统：工作、个人、紧急等分类标签
• 优先级设置：高、中、低三个优先级
• 截止日期：任务到期提醒和逾期标识
• 搜索功能：实时搜索任务内容
• 数据持久化：本地存储，数据不丢失

🔧 技术特性

• PWA 支持：可安装为原生应用
• 离线可用：Service Worker 缓存策略
• 键盘快捷键：提升操作效率
• 深色模式：自动适应系统主题
• 无障碍访问：遵循 WCAG 可访问性标准

🚀 快速开始

安装

直接下载项目文件到本地，或者克隆仓库：

# 克隆项目
git clone <repository-url>
cd TodoHub

# 或者直接下载ZIP文件解压

运行

由于是纯前端应用，您可以：

1. 直接打开：双击 index.html 文件
2. 本地服务器：使用任何本地HTTP服务器

   # 使用 Python
   python -m http.server 8000
   
   # 使用 Node.js
   npx serve .
   
   # 使用 Live Server (VS Code插件)

3. 部署到云端：上传到任何静态网站托管服务

📱 PWA 安装

1. 在浏览器中打开应用
2. 点击地址栏的"安装"按钮
3. 或者使用浏览器菜单中的"添加到主屏幕"选项

🎯 使用指南

基本操作

• 添加任务：点击"添加任务"按钮或使用快捷键 Ctrl+N
• 编辑任务：点击任务卡片进入编辑模式
• 移动任务：拖拽任务卡片到不同的状态列
• 搜索任务：在顶部搜索框输入关键词
• 筛选任务：点击左侧标签进行过滤

快捷键

• Ctrl + N：添加新任务
• Escape：关闭模态框

视图切换

• 看板视图：卡片式布局，支持拖拽操作
• 列表视图：列表式布局，支持排序筛选
• 统计视图：数据统计和分析

🏗️ 项目结构

TodoHub/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 主要逻辑
├── manifest.json       # PWA 清单
├── sw.js              # Service Worker
└── README.md          # 项目文档

🎨 设计系统

色彩体系

• 主色调：#667eea (渐变至 #764ba2)
• 次要色：#f093fb (渐变至 #f5576c)
• 强调色：#4facfe (渐变至 #00f2fe)

玻璃拟态效果

• 透明度：rgba(255, 255, 255, 0.7)
• 模糊效果：backdrop-filter: blur(12px)
• 边框：1px solid rgba(255, 255, 255, 0.8)
• 阴影：0 8px 32px rgba(0, 0, 0, 0.1)

字体系统

• 主字体：Inter
• 权重：300, 400, 500, 600, 700
• 回退字体：-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto

🛠️ 技术栈

• HTML5：语义化标签、可访问性
• CSS3：
  • CSS Grid & Flexbox 布局
  • CSS Variables (自定义属性)
  • backdrop-filter 玻璃效果
  • CSS 动画和过渡
• JavaScript (ES6+)：
  • 模块化设计
  • LocalStorage 数据持久化
  • Drag & Drop API
  • Web Animations API
• PWA 技术：
  • Web App Manifest
  • Service Worker
  • 缓存策略

📱 浏览器支持

• Chrome 88+
• Firefox 84+
• Safari 14+
• Edge 88+

注意：玻璃拟态效果需要支持 backdrop-filter 的现代浏览器。

🔧 自定义配置

修改颜色主题

在 styles.css 的 :root 选择器中修改 CSS 变量：

:root {
    --primary-color: #your-color;
    --primary-gradient: linear-gradient(135deg, #color1 0%, #color2 100%);
    /* 其他颜色变量... */
}

添加新标签

在 script.js 中的 getTagName() 方法添加新标签：

getTagName(tag) {
    const tagNames = {
        'work': '工作',
        'personal': '个人',
        'urgent': '紧急',
        'new-tag': '新标签'  // 添加新标签
    };
    return tagNames[tag] || tag;
}

🚧 开发计划

• 云端同步功能
• 团队协作功能
• 更多主题选择
• 数据导入导出
• 任务模板
• 时间追踪
• 提醒通知

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

TodoHub - 让待办事项管理变得更加优雅和高效 ✨