# ScheduleDaily

**Repository Path**: orange_half/schedule-daily

## Basic Information

- **Project Name**: ScheduleDaily
- **Description**: 日程安排
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-28
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ScheduleDaily


## 项目简介

ScheduleDaily 是一款轻量级的移动端日程管理应用，基于原生 HTML5 + CSS3 + JavaScript 开发。它提供简洁直观的界面，帮助用户高效管理日常任务，支持区间选择、批量操作和数据导入导出等核心功能，完全基于浏览器运行，无需安装任何依赖。

### 设计理念
- **轻量级**: 纯前端实现，无需后端服务器
- **移动端优先**: 专为触摸操作优化的界面设计
- **离线可用**: 数据本地存储，无需网络连接
- **隐私安全**: 所有数据仅存储在用户设备本地

## 核心功能

### 📅 日历视图
- **月份展示**: 清晰的月历布局，支持左右滑动或点击导航按钮切换月份
- **日期标记**: 
  - 今天日期特殊标记（橙色圆圈显示"今"字）
  - 有未完成任务的日期标记蓝色圆点
  - 任务全部完成的日期标记绿色圆点
- **直观导航**: 顶部显示当前年月，支持快速跳转

### ✅ 任务管理
- **任务查看**: 点击任意日期查看当天任务列表
- **添加任务**: 点击右下角"+"按钮快速添加任务
- **批量添加**: 支持多行输入，每行一个任务，一次性添加多个任务
- **任务状态**: 点击复选框轻松切换任务完成状态
- **任务删除**: 滑动任务或点击删除按钮快速删除
- **视觉区分**: 已完成任务显示删除线和灰色文字，未完成任务保持黑色

### 🎯 区间选择与批量操作
- **区间选择**: 长按起始日期开始选择，再长按结束日期完成区间选择
- **跨月操作**: 支持跨月份的区间选择，点击导航按钮可在选择过程中切换月份
- **批量操作**: 选择区间后弹出操作面板，支持：
  - 批量添加任务到选中日期
  - 批量标记选中日期的所有任务为完成
  - 批量删除选中日期的所有任务

### 💾 数据管理
- **数据导出**: 一键复制 JSON 格式的任务数据，方便备份
- **数据导入**: 粘贴 JSON 数据快速导入任务
- **自动保存**: 使用 localStorage 自动保存所有任务数据，刷新页面不丢失

### 🎯 快速定位
- **回到今天**: 点击顶部"今天"按钮快速跳转到当前日期
- **日期跳转**: 支持通过导航按钮快速切换月份

## 使用说明

### 📝 添加任务
1. **选择日期**: 点击日历上的目标日期，查看当天任务列表
2. **打开添加界面**: 点击右下角的"+"按钮
3. **输入任务**: 在弹窗中输入任务内容（支持多行，每行一个任务）
4. **确认添加**: 点击"确认"按钮完成添加

### ✅ 完成任务
- 点击任务左侧的复选框即可切换任务的完成状态
- 已完成任务会自动显示删除线和灰色文字

### 🗑️ 删除任务
- **单任务删除**: 点击任务右侧的"×"按钮快速删除

### 🎯 批量操作
#### 区间选择
1. **开始选择**: 长按日历上的起始日期
2. **跨月选择**: 如需选择跨月份的区间，点击导航按钮切换到目标月份
3. **完成选择**: 长按另一个日期完成区间选择

#### 批量操作选项
选择区间后会弹出操作面板，提供以下选项：
- **批量添加**: 输入任务内容，将任务添加到选中的所有日期
- **批量完成**: 将选中日期的所有任务标记为完成
- **批量删除**: 删除选中日期的所有任务

### 💾 数据导入导出
- **导出数据**: 点击顶部"导出"按钮，系统会自动复制 JSON 格式的任务数据到剪贴板
- **导入数据**: 点击顶部"导入"按钮，粘贴之前导出的 JSON 数据即可完成导入
- **数据备份**: 建议定期导出数据进行备份，以防数据丢失

## 技术实现

### 前端技术栈
- **HTML5**: 页面结构和语义化标签
- **CSS3**: 样式设计和响应式布局
- **JavaScript ES6+**: 核心功能实现和交互逻辑

### 核心技术点
- **数据存储**: 使用 localStorage 进行本地数据持久化
- **响应式设计**: 适配各种移动设备屏幕尺寸
- **触摸交互**: 支持滑动、长按等触摸操作
- **事件处理**: 优化的事件委托和冒泡处理
- **性能优化**: 高效的 DOM 操作和渲染优化

## 项目结构

```
├── index.html    # 主页面结构
└── image.png     # 项目截图
```

## 使用方式

直接在浏览器中打开 index.html 文件即可使用，无需安装任何依赖。

推荐使用 Chrome、Safari、Firefox 等现代浏览器访问。

## 更新日志

### v1.3.3 (2026-04-30)
- 🔧 修复日期与星期对应关系错误的问题
- 📅 日历日期现在正确对齐到对应的星期列
- ⭕ 空白格子占位，不显示其他月份的日期
- 🎯 日历布局更加简洁清晰

### v1.3.2 (2026-04-29)
- 📅 应用标题添加日历图标，界面更美观
- 🖼️ 添加浏览器标签页图标（favicon）
- 🎨 图标添加柔和弹跳动画效果
- 📝 将"日历任务管理"更名为"日程管理"，名称更简洁

### v1.3.1 (2026-04-29)
- 🌙 深色模式支持用户手动切换和自动跟随系统

### v1.3.0 (2026-04-29)
- 🔒 新增删除保护开关，防止误操作删除任务
- 🔒 删除按钮默认隐藏，开启删除保护后显示
- 📥 新增支持选择本地JSON文件导入，与导出功能对应
- 🌙 支持跟随系统深色/浅色模式自动切换
- ✨ 所有弹窗替换为 Toast 轻提示，美观不打断操作

### v1.2.8 (2026-04-29)
- 🎯 导入功能合并为单个输入框，自动识别URL或文件名
- ✅ 上传成功后在弹窗内显示结果，无需alert
- 📋 文本框自动选中，方便复制
- 🐛 修复代码错误

### v1.2.7 (2026-04-29)
- 🔧 代码优化和bug修复

### v1.2.6 (2026-04-29)
- ☁️ 新增支持上传到服务器功能
- 📁 新增支持从服务器导入数据
- 💾 服务器端数据验证和错误处理
- 📝 文件名使用时间戳+UUID格式
- 🎨 优化界面交互体验
- 🚀 提升应用响应速度
- 💾 新增支持从URL导入JSON文件
- 📥 新增支持下载JSON文件备份
- 🐛 修复已知问题
- 📱 增强移动端兼容性

### v1.2.5 (2026-04-28)
- 🎨 优化界面交互体验
- 🚀 提升应用响应速度
- 💾 新增支持从URL导入JSON文件
- 📥 新增支持下载JSON文件备份
- 🐛 修复已知问题
- 📱 增强移动端兼容性

### v1.0.0 (2024-04-27)
- ✨ 完成基础功能开发
- 📅 实现日历视图和任务管理
- 🎯 支持区间选择和批量操作
- 💾 添加导入导出功能
- 📱 优化移动端交互体验
- 🎨 完善界面设计和视觉效果
- 🚀 提升应用性能和稳定性

界面截图
![输入图片说明](image.png)

测试地址
[https://schedule-daily.vercel.app/](http://3059499050)