feat(ui): 记录页月份联动与多项 UI 美化/修复
- records: 底部列表与月份选择器联动，新增 [本月|最近] 分段控件；标题/空态随模式切换 - leaderboard: 领奖台布局(冠军居中+皇冠)、次数标注于底座且三档水平对齐；头像 cloud:// 批量预解析提速(云函数需重新部署) - index/timer: 主色底图标改白色变体修复隐形；目标数字按微信字体缩放补偿真机遮挡 - settings: 配色方案横滑渐变色卡；头像上传前压缩至 200px - theme: 新增 teal 主题；暗黑背景统一对齐 - 圆形头像双保险(image 自身 border-radius)修复月/年榜方图 注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。
This commit is contained in:
@@ -28,7 +28,7 @@ Component({
|
||||
})
|
||||
},
|
||||
|
||||
'remaining, duration, size, ringWidth, primaryColor, trackColor'() {
|
||||
'remaining, duration, size, ringWidth, primaryColor, primaryLightColor, trackColor'() {
|
||||
this._draw()
|
||||
}
|
||||
},
|
||||
@@ -53,11 +53,19 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
// '#FF6B35' -> [255, 107, 53]
|
||||
_hexToRgb(hex) {
|
||||
const m = /^#?([0-9a-f]{6})$/i.exec(hex || '')
|
||||
if (!m) return [255, 107, 53]
|
||||
const n = parseInt(m[1], 16)
|
||||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
|
||||
},
|
||||
|
||||
_draw() {
|
||||
const ctx = this._ctx
|
||||
if (!ctx) return
|
||||
|
||||
const { size, ringWidth, duration, remaining, primaryColor, trackColor } = this.data
|
||||
const { size, ringWidth, duration, remaining, primaryColor, primaryLightColor, trackColor } = this.data
|
||||
const dpr = this._dpr
|
||||
|
||||
const w = size * dpr
|
||||
@@ -66,7 +74,9 @@ Component({
|
||||
|
||||
const cx = w / 2
|
||||
const cy = h / 2
|
||||
const radius = (size - ringWidth) / 2 * dpr
|
||||
// reserve room for the glowing end dot so its shadow isn't clipped
|
||||
const glowPad = 6 * dpr
|
||||
const radius = (size - ringWidth) / 2 * dpr - glowPad
|
||||
const lw = ringWidth * dpr
|
||||
|
||||
// track ring
|
||||
@@ -81,13 +91,52 @@ Component({
|
||||
const ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
|
||||
if (ratio > 0.001) {
|
||||
const startAngle = -Math.PI / 2
|
||||
const endAngle = startAngle + ratio * Math.PI * 2
|
||||
const sweep = ratio * Math.PI * 2
|
||||
const [r1, g1, b1] = this._hexToRgb(primaryColor)
|
||||
const [r2, g2, b2] = this._hexToRgb(primaryLightColor || primaryColor)
|
||||
|
||||
// Conic gradient along the arc (light -> primary), drawn as small
|
||||
// arc segments. Segment count is bounded so per-frame redraws stay cheap.
|
||||
const segs = Math.max(16, Math.min(120, Math.ceil(sweep / 0.06)))
|
||||
for (let i = 0; i < segs; i++) {
|
||||
const a0 = startAngle + (sweep * i) / segs
|
||||
const a1 = startAngle + (sweep * (i + 1)) / segs + 0.004 // tiny overlap to hide seams
|
||||
const t = 1 - i / (segs - 1) // head (i=0, oldest remaining) is primary, tail is light
|
||||
const r = Math.round(r1 + (r2 - r1) * t)
|
||||
const g = Math.round(g1 + (g2 - g1) * t)
|
||||
const b = Math.round(b1 + (b2 - b1) * t)
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, a0, a1)
|
||||
ctx.strokeStyle = `rgb(${r},${g},${b})`
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'butt'
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// round cap at the tail (12 o'clock side)
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, startAngle, endAngle)
|
||||
ctx.strokeStyle = primaryColor
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
ctx.arc(cx + radius * Math.cos(startAngle), cy + radius * Math.sin(startAngle), lw / 2, 0, Math.PI * 2)
|
||||
ctx.fillStyle = `rgb(${r2},${g2},${b2})`
|
||||
ctx.fill()
|
||||
|
||||
// glowing dot at the leading end
|
||||
const endAngle = startAngle + sweep
|
||||
const ex = cx + radius * Math.cos(endAngle)
|
||||
const ey = cy + radius * Math.sin(endAngle)
|
||||
ctx.save()
|
||||
ctx.shadowColor = primaryColor
|
||||
ctx.shadowBlur = 12 * dpr
|
||||
ctx.beginPath()
|
||||
ctx.arc(ex, ey, lw / 2, 0, Math.PI * 2)
|
||||
ctx.fillStyle = primaryColor
|
||||
ctx.fill()
|
||||
// white core for a "light bulb" feel
|
||||
ctx.shadowBlur = 0
|
||||
ctx.beginPath()
|
||||
ctx.arc(ex, ey, lw / 4, 0, Math.PI * 2)
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.9)'
|
||||
ctx.fill()
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 80rpx;
|
||||
font-weight: 700;
|
||||
font-size: 88rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2rpx;
|
||||
|
||||
@@ -84,8 +84,8 @@
|
||||
}
|
||||
|
||||
.ui-btn__icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Dark mode: shadows barely read against the darker backdrop, so add a
|
||||
faint bright edge to keep cards elevated and separated from the page. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ui-card {
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.45), 0 0 0 1rpx rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-card--flush {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -18,6 +26,21 @@
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* Gradient variant: hero card filled with the theme gradient, white text.
|
||||
Descendant elements override --text / --text-secondary locally so any
|
||||
generic text inside automatically flips to white. */
|
||||
.ui-card.gradient {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
||||
box-shadow: 0 8rpx 28rpx rgba(var(--primary-rgb), 0.35);
|
||||
/* These custom properties are the ONLY channel that crosses the component
|
||||
style-isolation boundary into slotted page content (see MEMORY.md). Any
|
||||
text/fill inside the hero card must read from them, never var(--primary). */
|
||||
--text: #FFFFFF;
|
||||
--text-secondary: rgba(255, 255, 255, 0.85);
|
||||
--border: rgba(255, 255, 255, 0.28);
|
||||
--on-primary: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Staggered entrance animation */
|
||||
.ui-card.in {
|
||||
animation: uiCardIn 0.45s ease both;
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
/* dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sk-card { background: var(--card-bg, #1C1C1E); }
|
||||
.sk-card { background: var(--card-bg, #26262B); }
|
||||
.skeleton--active .sk-bar,
|
||||
.skeleton--active .sk-circle {
|
||||
background: linear-gradient(90deg,
|
||||
|
||||
Reference in New Issue
Block a user