feat(calendar): 年月拨盘(iOS 闹钟式滚轮)替换工具条的月份文字
- 新增 components/MonthYearWheel.jsx:年、月两列滚轮 · scroll-snap 吸附 + 指针按住拖动 + 鼠标滚轮/触摸板,停稳 140ms 后落值 · 滚动过程中实时算居中行,中间行放大加粗高亮、相邻行缩小淡出(像苹果拨盘) · 点某一行直接跳到该行;「回到今天」一键回当月 · 年份范围默认前后 12/20 年,两侧夹在视口内,下方放不下自动翻到上方 - 两个入口: · 工具条上的「2026年9月」由 <strong> 换成按钮,点击弹出拨盘,再点一次收起 · 日期跳转浮层里的标题同样可点:点击后浮层收起、同位弹出拨盘 - 拨盘选完年月,主日历与跳转浮层同步过去 修掉一个竞态:两列在同一帧内先后停稳时,后一次会读到渲染期闭包里的旧值, 把前一次的结果覆盖(滚到 2028年12月 会退回 2026年12月)。 改为组件内用 ref 保存最新年月、每次落值先更新 ref 再回调。 顺带修正跳转浮层标题多出来的一个右花括号。
This commit is contained in:
@@ -288,7 +288,9 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
|
||||
.calendar-toolbar { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
|
||||
.calendar-toolbar button { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
|
||||
.calendar-toolbar button:hover { background: var(--surface-hover); border-color: var(--border-light); color: var(--text-primary); }
|
||||
.calendar-toolbar strong { min-width: 88px; color: var(--text-primary); text-align: center; font-size: 12.5px; }
|
||||
.calendar-toolbar .calendar-month-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 28px; padding: 0 9px; color: var(--text-primary); font-size: 12.5px; font-variant-numeric: tabular-nums; }
|
||||
.calendar-toolbar .calendar-month-btn:hover { border-color: var(--primary-border); background: var(--primary-bg); color: var(--primary-light); }
|
||||
.calendar-toolbar .calendar-month-btn.is-open { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-light); }
|
||||
.calendar-toolbar .calendar-today-btn { padding: 0 9px; border-color: var(--border-light); background: var(--surface-deep); font-size: 11px; }
|
||||
/* 快速跳转日期:平时是低调的日历图标,悬浮/展开变蓝 */
|
||||
.calendar-toolbar .calendar-jump-btn { border-color: var(--border-light); background: var(--surface-deep); }
|
||||
@@ -436,6 +438,25 @@ 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); }
|
||||
/* 年月拨盘(iOS 闹钟式滚轮) */
|
||||
.calendar-wheel-pop { --wheel-item: 32px; padding: 12px 14px 10px; }
|
||||
.ymw-body { display: grid; gap: 9px; }
|
||||
.ymw-drum { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; }
|
||||
.ymw-highlight { position: absolute; left: 2px; right: 2px; top: 50%; height: var(--wheel-item); transform: translateY(-50%); border: 1px solid var(--primary-border); border-radius: 9px; background: var(--primary-bg); pointer-events: none; }
|
||||
.ymw-col { position: relative; width: 72px; height: calc(var(--wheel-item) * 3); }
|
||||
.ymw-list { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: none; cursor: grab; }
|
||||
.ymw-list::-webkit-scrollbar { display: none; }
|
||||
.ymw-list.is-dragging { scroll-snap-type: none; cursor: grabbing; }
|
||||
.ymw-cell { display: block; width: 100%; height: var(--wheel-item); border: 0; background: transparent; color: var(--text-tertiary); font: 15px var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; scroll-snap-align: center; cursor: pointer; transform-origin: center; transition: color var(--transition-fast); }
|
||||
.ymw-cell:hover { color: var(--text-secondary); }
|
||||
.ymw-cell.is-active { color: var(--primary-light); font-weight: 800; }
|
||||
.ymw-pad { height: var(--wheel-item); }
|
||||
.ymw-unit { color: var(--text-tertiary); font-size: 12px; }
|
||||
.ymw-today { width: 100%; height: 27px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--surface-deep); color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
|
||||
.ymw-today:hover { border-color: var(--primary); color: var(--primary-light); }
|
||||
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(280px, .72fr); gap: 18px; align-items: start; }
|
||||
.dashboard-primary-column, .dashboard-secondary-column { min-width: 0; }
|
||||
.ai-digest-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-bg) 82%, var(--surface)), var(--surface)); }
|
||||
|
||||
Reference in New Issue
Block a user