# 日历选天计数应用

**Repository Path**: AdminRDC/calendar-app

## Basic Information

- **Project Name**: 日历选天计数应用
- **Description**: 一款基于 Vue 3 的轻量级日历应用,支持日期选择统计和中国法定节假日自动标记(含调休信息)。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-11
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 日历选天计数应用

基于 Vue 3 + Vite 开发的轻量级日历应用，支持日期选择统计和免费的中国节假日数据接入。

## 📸 应用截图

### 主界面展示
![完整的日历月视图](./screenshots/完整的日历月视图.png)

*图：完整的日历月视图 - 显示年月切换、星期标题和日期网格*

### 核心功能
![顶部年月切换按钮](./screenshots/顶部年月切换按钮.png)

*图：顶部导航栏 - 支持上一月/下一月切换和当前月份显示*

![已选天数统计显示](./screenshots/已选天数统计显示.png)

*图：实时统计 - 显示已选择的天数，支持一键清空*

![清空选择按钮](./screenshots/清空选择按钮.png)

*图：清空功能 - 点击即可清除所有已选日期*

### 节假日标记
![法定节假日显示](./screenshots/法定节假日显示.png)

*图：节假日标识 - 🔴 红色边框表示法定节假日，🟠 橙色边框表示调休上班日*

---

## 📸 功能特性

### ✅ 日历展示
- 年月切换导航（上一月/下一月）
- 完整的月视图展示
- 星期标题显示（日一二三四五六）
- 当前月份高亮显示

### ✅ 日期选择
- 点击日期进行选中/取消
- 实时显示已选天数统计
- 支持一键清空所有选择
- 选中状态持久化显示

### ✅ 节假日数据
- 自动接入 Timor API（免费的中国节假日数据源）
- 🔴 **红色标记**：法定节假日（如春节、国庆等）
- 🟠 **橙色标记**：调休上班日（周末补班）
- 📋 图例说明清晰展示

### ✅ 交互体验
- 平滑的悬停效果
- 选中状态视觉反馈
- 响应式设计，适配不同屏幕
- 流畅的用户操作体验

## 🛠️ 技术栈

- **前端框架**: Vue 3.5+ (Composition API)
- **构建工具**: Vite 8.0+
- **包管理器**: npm
- **API 数据源**: [Timor API](http://timor.tech/api/holiday) - 免费中国节假日数据

## 🚀 快速开始

### 环境要求
- Node.js >= 16.x
- npm >= 7.x

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

访问 http://localhost:5173/ 查看应用

### 构建生产版本
```bash
npm run build
```

构建后的文件将输出到 `calendar-app/` 目录

### 预览生产构建
```bash
npm run preview
```

## 📖 使用说明

### 基本操作
1. **浏览日历**: 使用顶部左右箭头按钮切换月份
2. **选择日期**: 点击任意日期方块进行选中/取消
3. **查看统计**: 页面顶部实时显示已选天数
4. **清空选择**: 点击"清空选择"按钮清除所有选中日期

### 节假日标识说明
| 标识 | 含义 | 示例 |
|------|------|------|
| 🔴 红色边框 | 法定节假日 | 春节、国庆节等 |
| 🟠 橙色边框 | 调休上班日 | 周末补班 |
| 🟣 紫色背景 | 用户选中日期 | 手动选择的日期 |
| ⚪ 默认样式 | 普通工作日 | 无特殊标记 |

## 🏗️ 项目结构

```
calendar-app/
├── src/
│   ├── components/
│   │   └── Calendar.vue      # 日历核心组件（日期渲染与交互）
│   ├── App.vue               # 主应用组件（全局状态管理）
│   ├── main.js               # 应用入口文件
│   └── style.css             # 全局样式文件
├── public/                   # 静态资源目录
│   ├── favicon.svg           # 网站图标
│   └── icons.svg             # SVG 图标集
├── calendar-app/             # 生产构建输出目录
│   ├── index.html            # 入口 HTML
│   ├── assets/               # 编译后的资源文件
│   │   ├── index-*.js        # JavaScript  bundle
│   │   └── index-*.css       # CSS bundle
│   ├── favicon.svg
│   └── icons.svg
├── index.html                # 开发模板
├── package.json              # 项目依赖配置
├── vite.config.js            # Vite 配置文件
└── README.md                 # 项目说明文档
```

## ⚙️ 配置说明

### Vite 配置 (vite.config.js)
```javascript
export default defineConfig({
  plugins: [vue()],
  base: './',              // 相对路径，支持任意目录部署
  build: {
    outDir: 'calendar-app' // 自定义打包输出目录
  }
})
```

**关键配置项:**
- `base: './'`: 使用相对路径，确保在不同部署环境下资源正确加载
- `outDir: 'calendar-app'`: 自定义打包输出目录名称

### 部署建议

#### 方式一：静态服务器部署
将 `calendar-app/` 目录上传至 Nginx、Apache 等静态服务器

#### 方式二：本地预览
使用 Live Server 或其他 HTTP 服务器打开 `calendar-app/index.html`

#### 方式三：GitHub Pages
```bash
# 安装 gh-pages
npm install gh-pages --save-dev

# 部署到 GitHub Pages
npx gh-pages -d calendar-app
```

## 🌐 节假日数据源

本项目使用 [Timor API](http://timor.tech/api/holiday) 获取中国法定节假日数据。

### 支持的节假日类型
- 🎊 元旦（1月1日）
- 🧧 春节（农历正月初一至初三）
- 🌸 清明节（公历4月4-6日）
- 💼 劳动节（5月1-5日）
- 🐉 端午节（农历五月初五）
- 🥮 中秋节（农历八月十五）
- 🇨🇳 国庆节（10月1-7日）
- 🔄 调休补班日

**优势:**
- ✅ 完全免费，无需 API Key
- ✅ 数据准确，及时更新
- ✅ 包含调休信息
- ✅ 支持历史年份查询

## 🔧 开发指南

### 添加新功能
1. 在 `src/components/` 下创建新组件
2. 在 `App.vue` 中引入并使用
3. 运行 `npm run dev` 查看效果

### 修改样式
- 全局样式：编辑 `src/style.css`
- 组件样式：在对应 `.vue` 文件的 `<style>` 标签中修改

### 调试技巧
- 使用浏览器开发者工具查看控制台日志
- Vue DevTools 插件可查看组件状态

## 📝 常见问题

### Q: 打包后资源加载失败？
A: 确保 `vite.config.js` 中配置了 `base: './'`，使用相对路径。

### Q: 节假日数据不显示？
A: 检查网络连接，确保能访问 `timor.tech` API。

### Q: 如何修改打包目录名？
A: 在 `vite.config.js` 中修改 `build.outDir` 配置项。

### Q: 支持哪些浏览器？
A: 支持所有现代浏览器（Chrome、Firefox、Safari、Edge），需要支持 ES Modules。

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📧 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 GitHub Issue
- 发送邮件至项目维护者

---

**Made with ❤️ using Vue 3 + Vite**