wayne/happy-export
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(calendar): 跳转浮层年月改为直接输入，回车快速跳转

Browse Source 
- 点开 🗓 后的浮层标题由「弹出拨盘」改为输入框：前 4 位是年、后 1~2 位是月，
  只填 4 位则沿用当前月；回车跳转并关闭编辑态，Esc 取消且不关浮层
- 非数字自动过滤、上限 6 位；月越界或年份越界标红提示且保留焦点
- 进入编辑态时把「2026年9月」换成「202609」并全选，两种触发（鼠标按下/聚焦）都稳
- 工具条上的年月文字仍保留 iOS 拨盘入口
This commit is contained in:
Drsakura
2026-09-11 11:22:04 +08:00
parent 0453a49e4e
commit 850abe9327
2 changed files with 67 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/luxury.css
+6 -3
View File
@@ -438,9 +438,12 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.jump-day.is-selected { border-color: var(--primary); background: var(--primary); color: var(--surface-deep); font-weight: 800; }
.jump-today { width: 100%; height: 27px; margin-top: 8px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--surface-deep); color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.jump-today:hover { border-color: var(--primary); color: var(--primary-light); }
/* 跳转浮层标题 = 可点的年月（弹出拨盘） */
.jump-head .jump-month-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; width: auto; min-width: 0; height: 24px; padding: 0 8px; border-radius: 7px; color: var(--text-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.jump-head .jump-month-btn:hover { border-color: var(--primary-border); background: var(--primary-bg); color: var(--primary-light); }
/* 跳转浮层标题 = 直接输入年月（前 4 位年 + 后 1~2 位月，回车跳转） */
.jump-head .jump-month-input { display: block; flex: 1; width: auto; min-width: 0; min-height: 0; height: 26px; padding: 0 8px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--surface-deep); box-shadow: none; color: var(--text-primary); font: 12px var(--font-body); font-variant-numeric: tabular-nums; text-align: center; outline: none; cursor: text; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.jump-head .jump-month-input:hover { border-color: var(--primary-border); background: var(--primary-bg); }
.jump-head .jump-month-input:focus { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-light); font-weight: 700; letter-spacing: .3px; }
.jump-head .jump-month-input.is-invalid { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.jump-head .jump-month-input::selection { background: var(--primary); color: var(--surface-deep); }
/* 年月拨盘（iOS 闹钟式滚轮） */
.calendar-wheel-pop { --wheel-item: 32px; padding: 12px 14px 10px; }
.ymw-body { display: grid; gap: 9px; }