新增查下月按钮,优化按钮悬停效果

- 新增"查下月"按钮(getCustomMonthRange(-1))
- 按钮按逻辑排列:查当下 → 查下月 → 查上月 → 查上上月 → 查上上上月
- 按钮 hover 时颜色变亮 + 底部淡白底线,增加 transition 过渡
- 增大 padding 到 14px,按钮间距更舒适

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-22 21:47:30 +08:00
parent c35b60b496
commit b9f41191ab
2 changed files with 32 additions and 2 deletions

17
main.js
View File

@@ -22253,13 +22253,26 @@ const workDayData = {
display: "block",
lineHeight: "60px",
height: "60px",
padding: "0px 10px",
padding: "0px 14px",
textDecoration: "none",
color: "#e5e5e5",
cursor: "pointer",
border: "none",
borderBottom: "2px solid transparent",
transition: "color 0.15s, border-bottom-color 0.15s",
outline: "none",
};
Object.assign(button.style, copiedStyles);
button.addEventListener('mouseenter', () => {
button.style.color = "#fff";
button.style.borderBottomColor = "rgba(255,255,255,0.4)";
});
button.addEventListener('mouseleave', () => {
button.style.color = "#e5e5e5";
button.style.borderBottomColor = "transparent";
});
// 处理点击事件回调
if (typeof options.onClick === 'function') {
button.addEventListener('click', options.onClick);
@@ -22336,6 +22349,7 @@ const workDayData = {
});
const button4 = createQueryButton('查当周', getCurrentWeekRange);
const button0 = createQueryButton('查当月', () => getCustomMonthRange(0));
const buttonNext = createQueryButton('查下月', () => getCustomMonthRange(-1));
const button1 = createQueryButton('查上月', () => getCustomMonthRange(1));
const button2 = createQueryButton('查上上月', () => getCustomMonthRange(2));
const button3 = createQueryButton('查上上上月', () => getCustomMonthRange(3));
@@ -22348,6 +22362,7 @@ const workDayData = {
container.appendChild(button);
container.appendChild(button4);
container.appendChild(button0);
container.appendChild(buttonNext);
container.appendChild(button1);
container.appendChild(button2);
container.appendChild(button3);

View File

@@ -330,13 +330,26 @@
display: "block",
lineHeight: "60px",
height: "60px",
padding: "0px 10px",
padding: "0px 14px",
textDecoration: "none",
color: "#e5e5e5",
cursor: "pointer",
border: "none",
borderBottom: "2px solid transparent",
transition: "color 0.15s, border-bottom-color 0.15s",
outline: "none",
};
Object.assign(button.style, copiedStyles);
button.addEventListener('mouseenter', () => {
button.style.color = "#fff";
button.style.borderBottomColor = "rgba(255,255,255,0.4)";
});
button.addEventListener('mouseleave', () => {
button.style.color = "#e5e5e5";
button.style.borderBottomColor = "transparent";
});
// 处理点击事件回调
if (typeof options.onClick === 'function') {
button.addEventListener('click', options.onClick);
@@ -413,6 +426,7 @@
});
const button4 = createQueryButton('查当周', getCurrentWeekRange);
const button0 = createQueryButton('查当月', () => getCustomMonthRange(0));
const buttonNext = createQueryButton('查下月', () => getCustomMonthRange(-1));
const button1 = createQueryButton('查上月', () => getCustomMonthRange(1));
const button2 = createQueryButton('查上上月', () => getCustomMonthRange(2));
const button3 = createQueryButton('查上上上月', () => getCustomMonthRange(3));
@@ -425,6 +439,7 @@
container.appendChild(button);
container.appendChild(button4);
container.appendChild(button0);
container.appendChild(buttonNext);
container.appendChild(button1);
container.appendChild(button2);
container.appendChild(button3);