lc
afd2b72bcb
根因:.page-enter 的 pageIn 动画含 transform,即使 to: transform:none, 真机 fill-mode 没真正消除 transform,.container 仍是 fixed 的包含块。 记录页内容超一屏时 mask 降级相对 .container(高>>视口),flex 居中把 弹窗放到 .container 中心(视口外),真机看不到(模拟器宽松所以正常)。 - records: 日历详情弹窗移出 .container.page-enter,fixed 相对视口; 加 style themeStyle 拿暗黑变量 - app.wxss: pageIn keyframes 去掉 transform 只留 opacity 淡入,根治所有 页面(settings 计划编辑器/timer 完成弹窗)的 fixed 降级 - calendar-heatmap: onDayTap 的 find 用 Number(day) 修真机 dataset 字符串化导致 === 失败;移除诊断日志 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
const util = require('../../utils/util')
|
|
|
|
/**
|
|
* Generate 4 heat color shades from a primary color.
|
|
* Returns colors from lightest to darkest.
|
|
*/
|
|
const generateHeatColors = (hex) => {
|
|
if (!hex || hex.charAt(0) !== '#') {
|
|
return ['#FFE0D0', '#FFB088', '#FF6B35', '#E05520']
|
|
}
|
|
const r = parseInt(hex.slice(1, 3), 16)
|
|
const g = parseInt(hex.slice(3, 5), 16)
|
|
const b = parseInt(hex.slice(5, 7), 16)
|
|
|
|
return [
|
|
`rgba(${r},${g},${b},0.15)`, // lightest
|
|
`rgba(${r},${g},${b},0.35)`, // light
|
|
`rgba(${r},${g},${b},0.65)`, // medium
|
|
`rgba(${r},${g},${b},0.95)` // darkest
|
|
]
|
|
}
|
|
|
|
const getHeatColor = (duration, colors) => {
|
|
if (!duration || duration <= 0) return 'transparent'
|
|
if (duration < 30) return colors[0]
|
|
if (duration < 60) return colors[1]
|
|
if (duration < 120) return colors[2]
|
|
return colors[3]
|
|
}
|
|
|
|
Component({
|
|
properties: {
|
|
year: { type: Number, value: new Date().getFullYear() },
|
|
month: { type: Number, value: new Date().getMonth() + 1 },
|
|
records: { type: Array, value: [] },
|
|
primaryColor: { type: String, value: '#FF6B35' }
|
|
},
|
|
|
|
data: {
|
|
weeks: []
|
|
},
|
|
|
|
observers: {
|
|
'year, month, records, primaryColor'(year, month, records, primaryColor) {
|
|
this._compute(year, month, records, primaryColor)
|
|
}
|
|
},
|
|
|
|
lifetimes: {
|
|
ready() {
|
|
const { year, month, records, primaryColor } = this.properties
|
|
this._compute(year, month, records, primaryColor)
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
_compute(year, month, records, primaryColor) {
|
|
const weeks = util.getMonthCalendar(year, month)
|
|
const recordMap = {}
|
|
if (records && records.length) {
|
|
records.forEach((r) => {
|
|
const d = parseInt(r.date.split('-')[2])
|
|
recordMap[d] = (recordMap[d] || 0) + r.duration
|
|
})
|
|
}
|
|
|
|
const heatColors = generateHeatColors(primaryColor || '#FF6B35')
|
|
|
|
const data = weeks.map((week) =>
|
|
week.map((day) => {
|
|
if (!day) return null
|
|
const duration = recordMap[day] || 0
|
|
return { day, duration, color: getHeatColor(duration, heatColors) }
|
|
})
|
|
)
|
|
|
|
this.setData({ weeks: data })
|
|
},
|
|
|
|
onDayTap(e) {
|
|
const day = e.currentTarget.dataset.day
|
|
if (!day && day !== 0) return
|
|
// dataset values can arrive as strings on real devices, which breaks
|
|
// the strict === against c.day (number). Normalize so the lookup
|
|
// works on both simulator and device.
|
|
const cell = this.data.weeks.flat().find(c => c && c.day === Number(day))
|
|
if (!cell || cell.duration <= 0) return
|
|
this.triggerEvent('daytap', {
|
|
year: this.properties.year,
|
|
month: this.properties.month,
|
|
day: cell.day,
|
|
duration: cell.duration
|
|
})
|
|
}
|
|
}
|
|
})
|