\u5012\u73ed\u65e5\u5386<\/title>\n <style>\n :root {\n --primary-color: #3498db;\n --secondary-color: #2c3e50;\n --light-color: #ecf0f1;\n --danger-color: #e74c3c;\n --success-color: #2ecc71;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: #f5f7fa;\n color: #333;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n text-align: center;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 1px solid #ddd;\n }\n \n h1 {\n color: var(--secondary-color);\n margin-bottom: 10px;\n }\n \n .app-description {\n color: #666;\n font-size: 1.1rem;\n }\n \n .app-layout {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 20px;\n }\n \n .settings-panel {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n height: fit-content;\n }\n \n .calendar-view {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n .section-title {\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 1px solid #eee;\n color: var(--secondary-color);\n }\n \n .form-group {\n margin-bottom: 15px;\n }\n \n label {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n }\n \n input, select, textarea {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n }\n \n button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.3s;\n }\n \n button:hover {\n background-color: #2980b9;\n }\n \n .btn-danger {\n background-color: var(--danger-color);\n }\n \n .btn-danger:hover {\n background-color: #c0392b;\n }\n \n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n \n .calendar-nav button {\n background: none;\n color: var(--primary-color);\n font-size: 18px;\n padding: 5px 10px;\n }\n \n .calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 1px;\n background-color: #ddd;\n border: 1px solid #ddd;\n }\n \n .calendar-day-header {\n background-color: var(--secondary-color);\n color: white;\n text-align: center;\n padding: 10px;\n font-weight: 500;\n }\n \n .calendar-day {\n background-color: white;\n min-height: 120px;\n padding: 8px;\n position: relative;\n }\n \n .day-number {\n font-weight: bold;\n margin-bottom: 5px;\n }\n \n .shift-indicator {\n font-size: 12px;\n padding: 2px 5px;\n border-radius: 3px;\n margin-bottom: 3px;\n color: white;\n }\n \n .reminder-item {\n font-size: 11px;\n background-color: #f8f9fa;\n padding: 2px 5px;\n margin-bottom: 2px;\n border-radius: 2px;\n border-left: 3px solid var(--primary-color);\n cursor: pointer;\n }\n \n .shift-list {\n margin-bottom: 20px;\n }\n \n .shift-item {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n padding: 8px;\n background-color: #f8f9fa;\n border-radius: 4px;\n }\n \n .shift-color {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 10px;\n }\n \n .shift-actions {\n margin-left: auto;\n }\n \n .shift-actions button {\n padding: 4px 8px;\n font-size: 12px;\n margin-left: 5px;\n }\n \n .current-month-year {\n font-size: 1.5rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .today {\n background-color: rgba(52, 152, 219, 0.1);\n border: 1px solid var(--primary-color);\n }\n \n .other-month {\n color: #aaa;\n background-color: #f9f9f9;\n }\n \n .reminder-form {\n margin-top: 20px;\n padding-top: 15px;\n border-top: 1px solid #eee;\n }\n \n .reminder-list {\n margin-top: 10px;\n max-height: 200px;\n overflow-y: auto;\n }\n \n .reminder-list-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px;\n margin-bottom: 5px;\n background-color: #f8f9fa;\n border-radius: 4px;\n }\n \n .empty-state {\n text-align: center;\n color: #777;\n padding: 20px;\n }\n \n @media (max-width: 768px) {\n .app-layout {\n grid-template-columns: 1fr;\n }\n \n .settings-panel {\n order: 2;\n }\n \n .calendar-view {\n order: 1;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>\u5012\u73ed\u65e5\u5386<\/h1>\n <p class=\"app-description\">\u81ea\u5b9a\u4e49\u73ed\u6b21\u3001\u5468\u671f\u548c\u63d0\u9192\u4e8b\u9879\uff0c\u8f7b\u677e\u7ba1\u7406\u5012\u73ed\u5b89\u6392<\/p>\n <\/header>\n \n <div class=\"app-layout\">\n \n <div class=\"settings-panel\">\n <h2 class=\"section-title\">\u73ed\u6b21\u8bbe\u7f6e<\/h2>\n \n <div class=\"form-group\">\n <label for=\"shift-name\">\u73ed\u6b21\u540d\u79f0<\/label>\n <input type=\"text\" id=\"shift-name\" placeholder=\"\u4f8b\u5982\uff1a\u767d\u73ed\u3001\u591c\u73ed\u3001\u5c0f\u4f11\u3001\u5927\u4f53\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"shift-color\">\u73ed\u6b21\u989c\u8272<\/label>\n <input type=\"color\" id=\"shift-color\" value=\"#3498db\">\n <\/div>\n \n <button id=\"add-shift\">\u6dfb\u52a0\u73ed\u6b21<\/button>\n \n <div class=\"shift-list\" id=\"shift-list\">\n \n <\/div>\n \n <h2 class=\"section-title\">\u5012\u73ed\u5468\u671f\u8bbe\u7f6e<\/h2>\n \n <div class=\"form-group\">\n <label for=\"cycle-start\">\u5468\u671f\u5f00\u59cb\u65e5\u671f<\/label>\n <input type=\"date\" id=\"cycle-start\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"cycle-pattern\">\u5012\u73ed\u6a21\u5f0f<\/label>\n <select id=\"cycle-pattern\">\n <option value=\"custom\">\u81ea\u5b9a\u4e49<\/option>\n <option value=\"2\">\u4e24\u73ed\u5012<\/option>\n <option value=\"3\">\u4e09\u73ed\u5012<\/option>\n <option value=\"4\">\u5176\u5b83<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\" id=\"custom-cycle-container\" style=\"display: block;\">\n <label for=\"custom-cycle\">\u81ea\u5b9a\u4e49\u5468\u671f\uff08\u7528\u9017\u53f7\u5206\u9694\u73ed\u6b21ID\uff09<\/label>\n <input type=\"text\" id=\"custom-cycle\" value =\"0,1,2,0,1,3,3,3\" placeholder=\"\u4f8b\u5982\uff1a0,1,2,0,1,3,3,3\">\n <small>0\u8868\u793a\u767d\u73ed<\/small>\n <\/div>\n \n <button id=\"save-cycle\">\u4fdd\u5b58\u5468\u671f\u8bbe\u7f6e<\/button>\n \n <h2 class=\"section-title\">\u63d0\u9192\u4e8b\u9879<\/h2>\n \n <div class=\"reminder-form\">\n <div class=\"form-group\">\n <label for=\"reminder-date\">\u65e5\u671f<\/label>\n <input type=\"date\" id=\"reminder-date\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"reminder-text\">\u63d0\u9192\u5185\u5bb9<\/label>\n <textarea id=\"reminder-text\" rows=\"3\" placeholder=\"\u8f93\u5165\u63d0\u9192\u5185\u5bb9\"><\/textarea>\n <\/div>\n \n <button id=\"add-reminder\">\u6dfb\u52a0\u63d0\u9192<\/button>\n <\/div>\n \n <div class=\"reminder-list\" id=\"reminder-list\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"calendar-view\">\n <div class=\"calendar-header\">\n <button id=\"prev-month\">< \u4e0a\u4e2a\u6708<\/button>\n <div class=\"current-month-year\" id=\"current-month-year\">2023\u5e7410\u6708<\/div>\n <button id=\"next-month\">\u4e0b\u4e2a\u6708 ><\/button>\n <\/div>\n \n <div class=\"calendar-grid\" id=\"calendar-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u5e94\u7528\u72b6\u6001\u7ba1\u7406\n const state = {\n shifts: [\n { id: 0, name: \"\u4f11\u606f\uff08\u5927\u4f11\uff09\", color: \"#95a5a6\" },\n { id: 1, name: \"\u767d\u73ed\", color: \"#3498db\" },\n { id: 2, name: \"\u591c\u73ed\", color: \"#e74c3c\" },\n { id: 3, name: \"\u5c0f\u4f11\", color: \"#2ecc71\" }\n ],\n cyclePattern: [1, 2, 3, 1, 2, 0, 0, 0], \/\/ \u9ed8\u8ba4\u56db\u73ed\u4e24\u5012\n cycleStartDate: new Date(),\n reminders: [],\n currentDate: new Date()\n };\n\n \/\/ DOM\u5143\u7d20\n const elements = {\n shiftList: document.getElementById('shift-list'),\n calendarGrid: document.getElementById('calendar-grid'),\n currentMonthYear: document.getElementById('current-month-year'),\n prevMonth: document.getElementById('prev-month'),\n nextMonth: document.getElementById('next-month'),\n shiftName: document.getElementById('shift-name'),\n shiftColor: document.getElementById('shift-color'),\n addShift: document.getElementById('add-shift'),\n cycleStart: document.getElementById('cycle-start'),\n cyclePattern: document.getElementById('cycle-pattern'),\n customCycleContainer: document.getElementById('custom-cycle-container'),\n customCycle: document.getElementById('custom-cycle'),\n saveCycle: document.getElementById('save-cycle'),\n reminderDate: document.getElementById('reminder-date'),\n reminderText: document.getElementById('reminder-text'),\n addReminder: document.getElementById('add-reminder'),\n reminderList: document.getElementById('reminder-list')\n };\n\n \/\/ \u521d\u59cb\u5316\u5e94\u7528\n function initApp() {\n \/\/ \u4ece\u672c\u5730\u5b58\u50a8\u52a0\u8f7d\u6570\u636e\n loadFromLocalStorage();\n \n \/\/ \u8bbe\u7f6e\u9ed8\u8ba4\u65e5\u671f\n const today = new Date();\n elements.cycleStart.value = formatDate(today);\n elements.reminderDate.value = formatDate(today);\n state.cycleStartDate = today;\n \n \/\/ \u6e32\u67d3\u521d\u59cb\u754c\u9762\n renderShiftList();\n renderCalendar();\n renderReminderList();\n \n \/\/ \u8bbe\u7f6e\u4e8b\u4ef6\u76d1\u542c\u5668\n setupEventListeners();\n }\n\n \/\/ \u8bbe\u7f6e\u4e8b\u4ef6\u76d1\u542c\u5668\n function setupEventListeners() {\n elements.addShift.addEventListener('click', addShift);\n elements.prevMonth.addEventListener('click', prevMonth);\n elements.nextMonth.addEventListener('click', nextMonth);\n elements.cyclePattern.addEventListener('change', toggleCustomCycle);\n elements.saveCycle.addEventListener('click', saveCycle);\n elements.addReminder.addEventListener('click', addReminder);\n }\n\n \/\/ \u73ed\u6b21\u7ba1\u7406\u529f\u80fd\n function addShift() {\n const name = elements.shiftName.value.trim();\n const color = elements.shiftColor.value;\n \n if (!name) {\n alert('\u8bf7\u8f93\u5165\u73ed\u6b21\u540d\u79f0');\n return;\n }\n \n const newShift = {\n id: state.shifts.length,\n name: name,\n color: color\n };\n \n state.shifts.push(newShift);\n renderShiftList();\n \n \/\/ \u6e05\u7a7a\u8f93\u5165\n elements.shiftName.value = '';\n elements.shiftColor.value = '#3498db';\n \n \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n saveToLocalStorage();\n }\n\n function deleteShift(id) {\n if (id === 0) {\n alert('\u4e0d\u80fd\u5220\u9664\u4f11\u606f\u73ed\u6b21');\n return;\n }\n \n state.shifts = state.shifts.filter(shift => shift.id !== id);\n renderShiftList();\n \n \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n saveToLocalStorage();\n }\n\n function renderShiftList() {\n elements.shiftList.innerHTML = '';\n \n if (state.shifts.length === 0) {\n elements.shiftList.innerHTML = '<div class=\"empty-state\">\u6682\u65e0\u73ed\u6b21\u8bbe\u7f6e<\/div>';\n return;\n }\n \n state.shifts.forEach(shift => {\n const shiftItem = document.createElement('div');\n shiftItem.className = 'shift-item';\n shiftItem.innerHTML = `\n <div class=\"shift-color\" style=\"background-color: ${shift.color};\"><\/div>\n <div class=\"shift-name\">${shift.name}<\/div>\n <div class=\"shift-actions\">\n ${shift.id !== 0 ? `<button class=\"btn-danger\" onclick=\"deleteShift(${shift.id})\">\u5220\u9664<\/button>` : ''}\n <\/div>\n `;\n elements.shiftList.appendChild(shiftItem);\n });\n }\n\n \/\/ \u65e5\u5386\u529f\u80fd\n function prevMonth() {\n state.currentDate.setMonth(state.currentDate.getMonth() - 1);\n renderCalendar();\n }\n\n function nextMonth() {\n state.currentDate.setMonth(state.currentDate.getMonth() + 1);\n renderCalendar();\n }\n\n function renderCalendar() {\n \/\/ \u66f4\u65b0\u6708\u4efd\u663e\u793a\n const monthNames = [\"\u4e00\u6708\", \"\u4e8c\u6708\", \"\u4e09\u6708\", \"\u56db\u6708\", \"\u4e94\u6708\", \"\u516d\u6708\",\n \"\u4e03\u6708\", \"\u516b\u6708\", \"\u4e5d\u6708\", \"\u5341\u6708\", \"\u5341\u4e00\u6708\", \"\u5341\u4e8c\u6708\"];\n const year = state.currentDate.getFullYear();\n const month = state.currentDate.getMonth();\n elements.currentMonthYear.textContent = `${year}\u5e74${monthNames[month]}`;\n \n \/\/ \u6e05\u7a7a\u65e5\u5386\u7f51\u683c\n elements.calendarGrid.innerHTML = '';\n \n \/\/ \u6dfb\u52a0\u661f\u671f\u6807\u9898\n const weekdays = [\"\u65e5\", \"\u4e00\", \"\u4e8c\", \"\u4e09\", \"\u56db\", \"\u4e94\", \"\u516d\"];\n weekdays.forEach(day => {\n const dayElement = document.createElement('div');\n dayElement.className = 'calendar-day-header';\n dayElement.textContent = day;\n elements.calendarGrid.appendChild(dayElement);\n });\n \n \/\/ \u8ba1\u7b97\u5f53\u524d\u6708\u7684\u7b2c\u4e00\u5929\u548c\u6700\u540e\u4e00\u5929\n const firstDay = new Date(year, month, 1);\n const lastDay = new Date(year, month + 1, 0);\n \n \/\/ \u8ba1\u7b97\u9700\u8981\u663e\u793a\u7684\u4e0a\u4e2a\u6708\u7684\u65e5\u671f\n const startDay = firstDay.getDay();\n const prevMonthLastDay = new Date(year, month, 0).getDate();\n \n \/\/ \u8ba1\u7b97\u9700\u8981\u663e\u793a\u7684\u4e0b\u4e2a\u6708\u7684\u65e5\u671f\n const totalDays = 42; \/\/ 6\u5468\n const currentMonthDays = lastDay.getDate();\n const nextMonthDays = totalDays - (startDay + currentMonthDays);\n \n \/\/ \u6dfb\u52a0\u4e0a\u4e2a\u6708\u7684\u65e5\u671f\n for (let i = startDay - 1; i >= 0; i--) {\n const dayElement = createDayElement(prevMonthLastDay - i, true);\n elements.calendarGrid.appendChild(dayElement);\n }\n \n \/\/ \u6dfb\u52a0\u5f53\u524d\u6708\u7684\u65e5\u671f\n for (let i = 1; i <= currentMonthDays; i++) {\n const dayElement = createDayElement(i, false);\n elements.calendarGrid.appendChild(dayElement);\n }\n \n \/\/ \u6dfb\u52a0\u4e0b\u4e2a\u6708\u7684\u65e5\u671f\n for (let i = 1; i <= nextMonthDays; i++) {\n const dayElement = createDayElement(i, true);\n elements.calendarGrid.appendChild(dayElement);\n }\n }\n\n function createDayElement(day, isOtherMonth) {\n const dayElement = document.createElement('div');\n dayElement.className = 'calendar-day';\n \n if (isOtherMonth) {\n dayElement.classList.add('other-month');\n }\n \n \/\/ \u68c0\u67e5\u662f\u5426\u662f\u4eca\u5929\n const today = new Date();\n const currentYear = state.currentDate.getFullYear();\n const currentMonth = state.currentDate.getMonth();\n \n if (!isOtherMonth && \n day === today.getDate() && \n currentYear === today.getFullYear() && \n currentMonth === today.getMonth()) {\n dayElement.classList.add('today');\n }\n \n \/\/ \u6dfb\u52a0\u65e5\u671f\u6570\u5b57\n const dayNumber = document.createElement('div');\n dayNumber.className = 'day-number';\n dayNumber.textContent = day;\n dayElement.appendChild(dayNumber);\n \n \/\/ \u5982\u679c\u4e0d\u662f\u5176\u4ed6\u6708\u4efd\uff0c\u8ba1\u7b97\u73ed\u6b21\n if (!isOtherMonth) {\n const date = new Date(currentYear, currentMonth, day);\n const shift = getShiftForDate(date);\n \n if (shift) {\n const shiftIndicator = document.createElement('div');\n shiftIndicator.className = 'shift-indicator';\n shiftIndicator.textContent = shift.name;\n shiftIndicator.style.backgroundColor = shift.color;\n dayElement.appendChild(shiftIndicator);\n }\n \n \/\/ \u6dfb\u52a0\u63d0\u9192\u4e8b\u9879\n const reminders = getRemindersForDate(date);\n reminders.forEach(reminder => {\n const reminderItem = document.createElement('div');\n reminderItem.className = 'reminder-item';\n reminderItem.textContent = reminder.text;\n reminderItem.title = reminder.text;\n dayElement.appendChild(reminderItem);\n });\n }\n \n return dayElement;\n }\n\n function getShiftForDate(date) {\n \/\/ \u8ba1\u7b97\u4ece\u5468\u671f\u5f00\u59cb\u65e5\u671f\u5230\u76ee\u6807\u65e5\u671f\u7684\u5929\u6570\u5dee\n const timeDiff = date.getTime() - state.cycleStartDate.getTime();\n const dayDiff = Math.floor(timeDiff \/ (1000 * 3600 * 24));\n \n if (dayDiff < 0) return null;\n \n \/\/ \u8ba1\u7b97\u5728\u5468\u671f\u4e2d\u7684\u4f4d\u7f6e\n const cycleIndex = dayDiff % state.cyclePattern.length;\n const shiftId = state.cyclePattern[cycleIndex];\n \n \/\/ \u67e5\u627e\u5bf9\u5e94\u7684\u73ed\u6b21\n return state.shifts.find(shift => shift.id === shiftId);\n }\n\n \/\/ \u5468\u671f\u8bbe\u7f6e\u529f\u80fd\n function toggleCustomCycle() {\n if (elements.cyclePattern.value === 'custom') {\n elements.customCycleContainer.style.display = 'block';\n } else {\n elements.customCycleContainer.style.display = 'none';\n }\n }\n\n function saveCycle() {\n \/\/ \u83b7\u53d6\u5f00\u59cb\u65e5\u671f\n const startDate = new Date(elements.cycleStart.value);\n state.cycleStartDate = startDate;\n \n \/\/ \u6839\u636e\u9009\u62e9\u7684\u6a21\u5f0f\u8bbe\u7f6e\u5468\u671f\n const pattern = elements.cyclePattern.value;\n \n if (pattern === '2') {\n state.cyclePattern = [1, 2];\n } else if (pattern === '3') {\n state.cyclePattern = [1, 2, 3, 0];\n } else if (pattern === '4') {\n state.cyclePattern = [1, 2, 3, 0, 1, 2, 3];\n } else if (pattern === 'custom') {\n const customCycle = elements.customCycle.value;\n if (!customCycle) {\n alert('\u8bf7\u8f93\u5165\u81ea\u5b9a\u4e49\u5468\u671f');\n return;\n }\n \n try {\n state.cyclePattern = customCycle.split(',').map(id => parseInt(id));\n } catch (e) {\n alert('\u81ea\u5b9a\u4e49\u5468\u671f\u683c\u5f0f\u9519\u8bef\uff0c\u8bf7\u4f7f\u7528\u9017\u53f7\u5206\u9694\u7684\u6570\u5b57');\n return;\n }\n }\n \n \/\/ \u91cd\u65b0\u6e32\u67d3\u65e5\u5386\n renderCalendar();\n \n \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n saveToLocalStorage();\n \n alert('\u5468\u671f\u8bbe\u7f6e\u5df2\u4fdd\u5b58');\n }\n\n \/\/ \u63d0\u9192\u4e8b\u9879\u529f\u80fd\n function addReminder() {\n const date = new Date(elements.reminderDate.value);\n const text = elements.reminderText.value.trim();\n \n if (!text) {\n alert('\u8bf7\u8f93\u5165\u63d0\u9192\u5185\u5bb9');\n return;\n }\n \n const reminder = {\n id: Date.now(),\n date: date,\n text: text\n };\n \n state.reminders.push(reminder);\n renderReminderList();\n renderCalendar();\n \n \/\/ \u6e05\u7a7a\u8f93\u5165\n elements.reminderText.value = '';\n \n \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n saveToLocalStorage();\n }\n\n function deleteReminder(id) {\n state.reminders = state.reminders.filter(reminder => reminder.id !== id);\n renderReminderList();\n renderCalendar();\n \n \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n saveToLocalStorage();\n }\n\n function getRemindersForDate(date) {\n return state.reminders.filter(reminder => {\n const reminderDate = new Date(reminder.date);\n return reminderDate.getDate() === date.getDate() &&\n reminderDate.getMonth() === date.getMonth() &&\n reminderDate.getFullYear() === date.getFullYear();\n });\n }\n\n function renderReminderList() {\n elements.reminderList.innerHTML = '';\n \n if (state.reminders.length === 0) {\n elements.reminderList.innerHTML = '<div class=\"empty-state\">\u6682\u65e0\u63d0\u9192\u4e8b\u9879<\/div>';\n return;\n }\n \n \/\/ \u6309\u65e5\u671f\u6392\u5e8f\u63d0\u9192\u4e8b\u9879\n const sortedReminders = [...state.reminders].sort((a, b) => {\n return new Date(a.date) - new Date(b.date);\n });\n \n sortedReminders.forEach(reminder => {\n const reminderItem = document.createElement('div');\n reminderItem.className = 'reminder-list-item';\n reminderItem.innerHTML = `\n <div>\n <div>${formatDate(new Date(reminder.date))}<\/div>\n <div>${reminder.text}<\/div>\n <\/div>\n <button class=\"btn-danger\" onclick=\"deleteReminder(${reminder.id})\">\u5220\u9664<\/button>\n `;\n elements.reminderList.appendChild(reminderItem);\n });\n }\n\n \/\/ \u5de5\u5177\u51fd\u6570\n function formatDate(date) {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n }\n\n \/\/ \u672c\u5730\u5b58\u50a8\u529f\u80fd\n function saveToLocalStorage() {\n localStorage.setItem('shiftCalendar', JSON.stringify({\n shifts: state.shifts,\n cyclePattern: state.cyclePattern,\n cycleStartDate: state.cycleStartDate,\n reminders: state.reminders\n }));\n }\n\n function loadFromLocalStorage() {\n const savedData = localStorage.getItem('shiftCalendar');\n \n if (savedData) {\n const data = JSON.parse(savedData);\n \n if (data.shifts) state.shifts = data.shifts;\n if (data.cyclePattern) state.cyclePattern = data.cyclePattern;\n if (data.cycleStartDate) state.cycleStartDate = new Date(data.cycleStartDate);\n if (data.reminders) {\n \/\/ \u5c06\u5b57\u7b26\u4e32\u65e5\u671f\u8f6c\u6362\u4e3aDate\u5bf9\u8c61\n state.reminders = data.reminders.map(reminder => ({\n ...reminder,\n date: new Date(reminder.date)\n }));\n }\n }\n }\n\n \/\/ \u521d\u59cb\u5316\u5e94\u7528\n document.addEventListener('DOMContentLoaded', initApp);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u7528\u5012\u73ed\u52a9\u624b\u67e5\u73ed\u6b21\u611f\u89c9\u8d8a\u6765\u8d8a\u4e0d\u65b9\u4fbf\u4e86\uff0c\u62bd\u7a7a\u5199\u4e2a\u81ea\u5df1\u7528\u3002\u4e0b\u9762\u8fd9\u4e2a\u8fd0\u884c\u6709\u70b9\u95ee\u9898 \uff0c\u4f46\u70b9\u6211\u53ef\u6b63\u5e38\u67e5\u8be2\u5012\u73ed\u8868<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,1],"tags":[],"class_list":["post-1695","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-unknown"],"_links":{"self":[{"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/posts\/1695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/comments?post=1695"}],"version-history":[{"count":0,"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/posts\/1695\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/media?parent=1695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/categories?post=1695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.liujh168.com\/index.php\/wp-json\/wp\/v2\/tags?post=1695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1695,"date":"2025-11-24T22:50:36","date_gmt":"2025-11-24T14:50:36","guid":{"rendered":"http:\/\/www.liujh168.com\/?p=1176"},"modified":"2025-11-24T22:50:36","modified_gmt":"2025-11-24T14:50:36","slug":"shifts-2","status":"publish","type":"post","link":"https:\/\/www.liujh168.com\/index.php\/2025\/11\/24\/shifts-2\/","title":{"rendered":"\u5012\u73ed\u503c\u73ed\u67e5\u8be2\u8868"},"content":{"rendered":"

\u7528\u5012\u73ed\u52a9\u624b\u67e5\u73ed\u6b21\u611f\u89c9\u8d8a\u6765\u8d8a\u4e0d\u65b9\u4fbf\u4e86\uff0c\u62bd\u7a7a\u5199\u4e2a\u81ea\u5df1\u7528\u3002\u4e0b\u9762\u8fd9\u4e2a\u8fd0\u884c\u6709\u70b9\u95ee\u9898 \uff0c\u4f46\u70b9\u6211\u53ef\u6b63\u5e38\u67e5\u8be2\u5012\u73ed\u8868<\/a><\/p>\n