lq/schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化节假日（调休的班日没完成）

Browse Source
This commit is contained in:
年糕崽崽
2025-06-11 11:18:47 +08:00
parent 802a25791a
commit 62379b55fd
4 changed files with 132 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/App.vue
View File

@@ -4,14 +4,14 @@
<LoginModal v-if="showLoginModal" @login="handleLogin" @close="showLoginModal = false" />
<!-- 顶部导航 - 粘性布局 -->
<header class="sticky top-0 z-50 bg-gradient-to-r from-primary-600 to-primary-800 py-5 px-6 rounded-b-2xl shadow-lg w-full">
<!-- <header class="sticky top-0 z-50 text-orange-600/80 py-5 px-6 rounded-b-2xl shadow-lg w-full frosted-glass">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col sm:flex-row items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
<i class="fas fa-calendar-alt text-white text-2xl"></i>
<i class="fas fa-calendar-alt text-2xl"></i>
</div>
<h1 class="ml-4 text-2xl font-bold text-white drop-shadow">智能日程管家</h1>
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
</div>
<div class="mt-4 sm:mt-0 flex items-center">
@@ -48,11 +48,17 @@
</div>
</div>
</div>
</header>
</header>-->
<div class="w-full mx-auto px-4 py-8 sm:px-6">
<!-- 日历导航 -->
<div data-aos="fade-up" class="flex items-center justify-between mb-8 bg-white rounded-xl p-4 shadow">
<div class="flex items-center">
<div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
<i class="fas fa-calendar-alt text-2xl"></i>
</div>
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
</div>
<div class="flex items-center">
<button
@click="changeDate(-1)"
@@ -77,6 +83,38 @@
</button>
</div>
<div class="mt-4 sm:mt-0 flex items-center">
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
<button
@click="changeView('day')"
:class="{'bg-white text-primary-600': view === 'day'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-sun mr-2"></i> 日视图
</button>
<button
@click="changeView('week')"
:class="{'bg-white text-primary-600': view === 'week'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-week mr-2"></i> 周视图
</button>
<button
@click="changeView('month')"
:class="{'bg-white text-primary-600': view === 'month'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-days mr-2"></i> 月视图
</button>
</div>
<div class="ml-4 flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
</div>
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
</div>
</div>
<button
@click="currentDate = dayjs().format('YYYY-MM-DD')"
class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-lg hover:shadow-xl hover:transform hover:-translate-y-0.5 active:translate-y-0"
@@ -469,4 +507,9 @@ button:hover {
button:active {
transform: translateY(1px);
}
.frosted-glass {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
</style>

2
src/components/CalendarView.vue
View File

@@ -4,7 +4,7 @@
<div v-if="view === 'month'" class="month-view" data-aos="fade-up" data-aos-duration="500">
<div class="grid grid-cols-7 gap-1">
<div
v-for="day in ['日', '一', '二', '三', '四', '五', '六']"
v-for="day in ['一', '二', '三', '四', '五', '六', '日']"
:key="day"
class="text-center py-3 font-semibold text-gray-700 bg-gray-50 rounded-lg"
>

2
src/components/CommonEvents.vue
View File

@@ -50,7 +50,7 @@
<h2 class="text-white font-bold text-lg flex items-center">
<i class="fas fa-star mr-2"></i>
常用日程
<span class="ml-2 text-sm bg-white text-secondary-700 px-2 py-1 rounded-md">可拖拽</span>
<span class="ml-2 text-sm text-secondary-700 px-2 py-1 rounded-md">可拖拽</span>
</h2>
<button

141
src/utils/calendarUtils.js
View File

@@ -1,19 +1,16 @@
import dayjs from 'dayjs';
import * as chineseLunar from 'chinese-lunar';
import { getLunar } from 'chinese-lunar-calendar'
import {getLunar} from 'chinese-lunar-calendar';
const lunarMonthArray = [
'正', '二', '三', '四', '五', '六', '七', '八', '九', '十',
'十一', '十二'
// 2025年法定节假日配置
const LEGAL_HOLIDAYS_2025 = [
'2025-01-01', // 元旦（1月1日，周三，放假1天，不调休）
'2025-01-28', '2025-01-29', '2025-01-30', '2025-01-31', '2025-02-01', '2025-02-02', '2025-02-03', '2025-02-04', // 春节（1月28日-2月4日，共8天）
'2025-04-04', '2025-04-05', '2025-04-06', // 清明节（4月4日-6日，共3天）
'2025-05-01', '2025-05-02', '2025-05-03', '2025-05-04', '2025-05-05', // 劳动节（5月1日-5日，共5天）
'2025-05-31', '2025-06-01', '2025-06-02', // 端午节（5月31日-6月2日，共3天）
'2025-10-01', '2025-10-02', '2025-10-03', '2025-10-04', '2025-10-05', '2025-10-06', '2025-10-07', '2025-10-08' // 中秋+国庆（10月1日-8日，共8天）
];
const lunarArray = [
'初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
'廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'
];
/**
* 获取农历日期
* @param {string} date - YYYY-MM-DD格式的日期
@@ -21,16 +18,12 @@ const lunarArray = [
*/
export function getLunarDate(date) {
try {
const d = dayjs(date);
const year = d.year();
const month = d.month() + 1;
const day = d.date();
const result = getLunar(year, month, day);
console.log(getLunar(year, month, day));
// 如果result.dateStr包含初一则返回前两个字，如果不是则返回后两个字
if (result.dateStr.includes('初一')) {
return result.dateStr.substring(0, 2);
} else {
@@ -43,33 +36,53 @@ export function getLunarDate(date) {
}
/**
* 获取节假日信息
* 获取节假日信息（基于chinese-lunar-calendar）
* @param {string} date - YYYY-MM-DD格式的日期
* @returns {string|null} 节假日名称（如果没有则为null）
*/
export function getFestival(date) {
try {
return '';
// 使用dayjs解析日期
const d = dayjs(date);
const year = d.year();
const month = d.month() + 1;
const day = d.date();
// 公历节日
if (month === 1 && day === 1) return '元旦';
if (month === 2 && day === 14) return '情人节';
if (month === 3 && day === 8) return '妇女节';
if (month === 3 && day === 12) return '植树节';
if (month === 4 && day === 1) return '愚人节';
if (month === 5 && day === 1) return '劳动节';
if (month === 5 && day === 4) return '青年节';
if (month === 6 && day === 1) return '儿童节';
if (month === 7 && day === 1) return '建党节';
if (month === 8 && day === 1) return '建军节';
if (month === 9 && day === 10) return '教师节';
if (month === 10 && day === 1) return '国庆节';
if (month === 12 && day === 24) return '平安夜';
if (month === 12 && day === 25) return '圣诞节';
// 农历节日 - 使用chinese-lunar获取农历日期
const year = d.year();
const lunar = chineseLunar.solarToLunar(new Date(date));
// 获取农历信息
const lunar = getLunar(year, month, day);
// 农历节日
if (lunar.lunarMonth === 1 && lunar.lunarDay === 1) return '春节';
if (lunar.lunarMonth === 1 && lunar.lunarDay === 15) return '元宵节';
if (lunar.lunarMonth === 5 && lunar.lunarDay === 5) return '端午节';
if (lunar.lunarMonth === 8 && lunar.lunarDay === 15) return '中秋节';
if (lunar.lunarMonth === 9 && lunar.lunarDay === 9) return '重阳节';
// 农历节日判断（使用chinese-lunar-calendar库）
if (lunar.lunarMonth === 1 && lunar.lunarDate === 1) return '春节';
if (lunar.lunarMonth === 1 && lunar.lunarDate === 15) return '元宵节';
if (lunar.lunarMonth === 2 && lunar.lunarDate === 2) return '龙抬头';
if (lunar.lunarMonth === 3 && lunar.lunarDate === 3) return '上巳节';
if (lunar.solarTerm === '清明') return '清明节';
if (lunar.lunarMonth === 5 && lunar.lunarDate === 5) return '端午节';
if (lunar.lunarMonth === 7 && lunar.lunarDate === 7) return '七夕节';
if (lunar.lunarMonth === 7 && lunar.lunarDate === 15) return '中元节';
if (lunar.lunarMonth === 8 && lunar.lunarDate === 15) return '中秋节';
if (lunar.lunarMonth === 9 && lunar.lunarDate === 9) return '重阳节';
if (lunar.lunarMonth === 10 && lunar.lunarDate === 15) return '下元节';
if (lunar.solarTerm === '冬至') return '冬至节';
if (lunar.lunarMonth === 12 && lunar.lunarDate === 8) return '腊八节';
if (lunar.lunarMonth === 12 && lunar.lunarDate === 23) return '小年';
if (lunar.lunarMonth === 12 && lunar.lunarDate === 30) return '除夕';
return null;
} catch (error) {
@@ -79,56 +92,68 @@ export function getFestival(date) {
}
/**
* 获取节气信息
* 获取节气信息（基于chinese-lunar-calendar）
* @param {string} date - YYYY-MM-DD格式的日期
* @returns {string|null} 节气名称（如果没有则为null）
*/
export function getSolarTerm(date) {
return '大雪';
const d = dayjs(date);
const month = d.month() + 1;
const day = d.date();
// 24节气（简化版）
const terms = [
// 每个月的两个节气
[1, 5, '小寒'], [1, 20, '大寒'],
[2, 4, '立春'], [2, 19, '雨水'],
[3, 5, '惊蛰'], [3, 20, '春分'],
[4, 5, '清明'], [4, 20, '谷雨'],
[5, 5, '立夏'], [5, 21, '小满'],
[6, 6, '芒种'], [6, 21, '夏至'],
[7, 7, '小暑'], [7, 23, '大暑'],
[8, 7, '立秋'], [8, 23, '处暑'],
[9, 8, '白露'], [9, 23, '秋分'],
[10, 8, '寒露'], [10, 23, '霜降'],
[11, 7, '立冬'], [11, 22, '小雪'],
[12, 7, '大雪'], [12, 22, '冬至']
];
try {
const d = dayjs(date);
const year = d.year();
const month = d.month() + 1;
const day = d.date();
const lunar = getLunar(year, month, day);
return lunar.solarTerm || null;
} catch (error) {
console.error('获取节气错误:', error);
return null;
}
}
/**
* 是否为法定假日
* @param {string} date - YYYY-MM-DD格式的日期
* @param {number} [type=1] - 休息日类型：1=双休 2=大小周 3=单休
* @param firstSmallWeekDate
* @returns {boolean} 是否为法定假日
*/
export function isHoliday(date) {
export function isHoliday(date, type = 2, firstSmallWeekDate = '2025-2-22') {
try {
// 使用dayjs解析日期
const d = dayjs(date);
const dayOfWeek = d.day();
const dateStr = d.format('YYYY-MM-DD');
// 周六或周日为休息日
if (dayOfWeek === 0 || dayOfWeek === 6) {
// 检查是否为法定节假日
if (LEGAL_HOLIDAYS_2025.includes(dateStr)) {
return true;
}
// 检查是否为法定节假日
const festival = getFestival(date);
return !!festival;
const dayOfWeek = d.day(); // 0-6 (周日到周六)
// 根据休息日类型判断
switch (type) {
case 1: // 双休
return dayOfWeek === 0 || dayOfWeek === 6; // 周日或周六休息
case 2: { // 大小周
if (!firstSmallWeekDate) {
throw new Error('大小周模式需要指定第一周小周的日期');
}
const firstWeek = dayjs(firstSmallWeekDate).week();
const currentWeek = d.week();
const weekDiff = currentWeek - firstWeek;
// 奇数周为大周（周六周日都休息），偶数周为小周（仅周日休息）
const isSmallWeek = weekDiff % 2 === 0;
return isSmallWeek ? dayOfWeek === 0 : dayOfWeek === 0 || dayOfWeek === 6;
}
case 3: // 单休
return dayOfWeek === 0; // 仅周日休息
default:
return dayOfWeek === 0 || dayOfWeek === 6; // 默认双休
}
} catch (error) {
console.error('判断假日错误:', error);
return false;
}
}
}