习惯打卡应用

一个简洁美观的习惯追踪应用，帮助您建立和维持良好的生活习惯。

✨ 功能特点

• 📅 周视图打卡：直观的周视图界面，轻松记录每日习惯完成情况
• 📊 数据统计：图表展示习惯完成趋势和统计数据
• 🎯 分数系统：使用表情符号评分系统（😢 😔 😊 😄）
• 📱 响应式设计：完美适配桌面、平板和手机设备
• 🌙 主题支持：支持深色主题、高对比度等无障碍功能
• 💾 本地存储：数据安全存储在本地浏览器中

🏗️ 项目结构

habit_app/
├── js/                    # JavaScript模块
│   ├── main.js           # 应用入口 (50行)
│   ├── App.js            # 主应用类 (200行)
│   ├── HabitTracker.js   # 核心数据管理 (150行)
│   ├── WeekView.js       # 周视图渲染 (200行)
│   ├── ScoreModal.js     # 分数弹窗 (150行)
│   ├── ChartManager.js   # 图表管理 (150行)
│   ├── StorageManager.js # 数据存储 (100行)
│   ├── EventManager.js   # 事件管理 (100行)
│   └── utils/            # 工具函数
│       ├── dateUtils.js  # 日期工具 (100行)
│       ├── scoreUtils.js # 分数计算 (100行)
│       └── constants.js  # 常量定义 (50行)
├── css/                  # 样式模块
│   ├── main.css         # 主入口 (19行)
│   ├── base.css         # 基础样式 (120行)
│   ├── layout.css       # 布局样式 (191行)
│   ├── components.css   # 组件样式 (323行)
│   ├── themes.css       # 主题样式 (166行)
│   └── responsive.css   # 响应式样式 (267行)
├── index.html           # 主页面
└── README.md           # 项目说明

🚀 快速开始

本地运行

1. 克隆项目到本地
2. 启动本地服务器：

   python3 -m http.server 8000

3. 打开浏览器访问：http://localhost:8000

在线访问

访问 GitHub Pages 部署的版本：https://your-username.github.io/habit_app

🎨 设计特色

模块化架构

• JavaScript: 使用ES6模块系统，代码结构清晰
• CSS: 采用CSS变量系统，支持主题切换
• 响应式: 完美适配各种屏幕尺寸

用户体验

• 直观界面: 简洁美观的设计，操作简单
• 实时反馈: 即时保存和更新数据
• 无障碍支持: 支持键盘导航和屏幕阅读器

📱 使用说明

1. 添加习惯: 点击"添加习惯"按钮，输入习惯名称
2. 记录打卡: 点击周视图中的圆圈，选择完成情况
3. 查看统计: 在统计区域查看习惯完成趋势
4. 编辑习惯: 点击习惯旁的编辑按钮进行修改

🔧 技术栈

• 前端: HTML5, CSS3, JavaScript ES6+
• 图表: Chart.js
• 存储: localStorage
• 部署: GitHub Pages

📈 重构历程

代码质量提升

• ✅ 单个文件不超过300行
• ✅ 使用ES6模块系统
• ✅ 遵循单一职责原则
• ✅ 完整的响应式设计

功能完善

• ✅ 表情符号评分系统
• ✅ 数据导入导出功能
• ✅ 主题切换支持
• ✅ 无障碍功能

🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

📄 许可证

MIT License

---

注意: 目前数据存储在本地浏览器中，不同设备间无法同步。如需跨设备同步，建议使用云端存储服务。