feat: v1.5 — plan editor, voice prompts, UI polish
Major features: - Training plan editor: edit preset days/duration per plan (in-place override via custom_plans storage; preset ids preserved so existing records stay valid) - Voice prompts at 4 fixed points during training (halfway / 30s / 10s / done) via Tencent Cloud TTS (cloudfunctions/tts + utils/voice.js) - Free-training button: switched from outline (transparent) to ghost variant (theme-tinted) for visual weight Bug fixes: - 4 functional pages: SVG data URIs failed to render in WeChat because '\#' in colors was parsed as a data-URI fragment delimiter. encode the whole SVG via encodeURIComponent in utils/icons.js build(). - Old records (saved before id field was added) could not be deleted (data-id was empty, triggered defensive guard). Backfill stable legacy-<month>-<index>-<duration> ids in getRecords() and persist. - settings.js plan-row editor button event was bubbling up to the row's bindtap (which also fired onSelectPlan). Wrapped in catch:tap. UI: - Settings page: 3 hardcoded plans replaced with dynamic buildPlansList that overlays custom_plans on top of presets - Plan editor: bottom-sheet modal in settings page (regular view, not ui-modal — WeChat custom component root element drops position:fixed in this runtime) - Free-training button: rounded pill style, full-width, 24rpx gap from primary action; bottom sheet uses max-height: 88vh + internal scroll - Version bumped to v1.5, last updated 2026-06-10 Removed: - Daily reminder section (dailyReminder / reminderTime) — replaced by the 4 voice prompts which cover the same user need without requiring long-term scheduling that WeChat mini-programs can't actually do Misc: - utils/plan.js refactored to formula-driven: presets declare totalDays/startTarget/increment/cycleDays, days[] is generated. Same formula applies to custom plans. - Timer _remind() guards each prompt on minimum duration so short free-mode sessions don't fire 'last30' at the start - Cloud storage cloud_plans field added to data push payload; restored on first install via _restoreFromCloud - .gitignore added for local AI tool caches (.reasonix/, reasonix.toml, .codegraph/daemon.pid)
This commit is contained in:
@@ -1,10 +1,39 @@
|
||||
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: [] }
|
||||
records: { type: Array, value: [] },
|
||||
primaryColor: { type: String, value: '#FF6B35' }
|
||||
},
|
||||
|
||||
data: {
|
||||
@@ -12,20 +41,20 @@ Component({
|
||||
},
|
||||
|
||||
observers: {
|
||||
'year, month, records'(year, month, records) {
|
||||
this._compute(year, month, records)
|
||||
'year, month, records, primaryColor'(year, month, records, primaryColor) {
|
||||
this._compute(year, month, records, primaryColor)
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready() {
|
||||
const { year, month, records } = this.properties
|
||||
this._compute(year, month, records)
|
||||
const { year, month, records, primaryColor } = this.properties
|
||||
this._compute(year, month, records, primaryColor)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_compute(year, month, records) {
|
||||
_compute(year, month, records, primaryColor) {
|
||||
const weeks = util.getMonthCalendar(year, month)
|
||||
const recordMap = {}
|
||||
if (records && records.length) {
|
||||
@@ -35,18 +64,13 @@ Component({
|
||||
})
|
||||
}
|
||||
|
||||
const heatColors = generateHeatColors(primaryColor || '#FF6B35')
|
||||
|
||||
const data = weeks.map((week) =>
|
||||
week.map((day) => {
|
||||
if (!day) return null
|
||||
const duration = recordMap[day] || 0
|
||||
let color = 'transparent'
|
||||
if (duration > 0) {
|
||||
if (duration < 30) color = '#FFE0D0'
|
||||
else if (duration < 60) color = '#FFB088'
|
||||
else if (duration < 120) color = '#FF6B35'
|
||||
else color = '#E05520'
|
||||
}
|
||||
return { day, duration, color }
|
||||
return { day, duration, color: getHeatColor(duration, heatColors) }
|
||||
})
|
||||
)
|
||||
|
||||
@@ -64,15 +88,6 @@ Component({
|
||||
day,
|
||||
duration: cell.duration
|
||||
})
|
||||
},
|
||||
|
||||
getHeatColor(cell) {
|
||||
if (!cell || cell.duration <= 0) return 'transparent'
|
||||
const d = cell.duration
|
||||
if (d < 30) return '#FFE0D0'
|
||||
if (d < 60) return '#FFB088'
|
||||
if (d < 120) return '#FF6B35'
|
||||
return '#E05520'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
</view>
|
||||
<view class="heat-legend">
|
||||
<text class="legend-label">少</text>
|
||||
<view class="legend-block" style="background:#FFE0D0;"></view>
|
||||
<view class="legend-block" style="background:#FFB088;"></view>
|
||||
<view class="legend-block" style="background:#FF6B35;"></view>
|
||||
<view class="legend-block" style="background:#E05520;"></view>
|
||||
<view class="legend-block" style="background:{{primaryColor}}; opacity: 0.15;"></view>
|
||||
<view class="legend-block" style="background:{{primaryColor}}; opacity: 0.35;"></view>
|
||||
<view class="legend-block" style="background:{{primaryColor}}; opacity: 0.65;"></view>
|
||||
<view class="legend-block" style="background:{{primaryColor}}; opacity: 0.95;"></view>
|
||||
<text class="legend-label">多</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
Component({
|
||||
properties: {
|
||||
text: { type: String, value: '' },
|
||||
variant: { type: String, value: 'primary' }, // primary | outline | danger | ghost
|
||||
size: { type: String, value: 'md' }, // sm | md | lg | xl
|
||||
block: { type: Boolean, value: false },
|
||||
disabled: { type: Boolean, value: false },
|
||||
iconSrc: { type: String, value: '' },
|
||||
customStyle: { type: String, value: '' }
|
||||
},
|
||||
methods: {
|
||||
onTap() {
|
||||
this.triggerEvent('tap')
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<button
|
||||
class="ui-btn ui-btn--{{variant}} ui-btn--{{size}} {{block ? 'ui-btn--block' : ''}} {{disabled ? 'is-disabled' : ''}}"
|
||||
style="{{customStyle}}"
|
||||
bindtap="onTap"
|
||||
disabled="{{disabled}}"
|
||||
hover-class="none"
|
||||
>
|
||||
<image
|
||||
wx:if="{{iconSrc}}"
|
||||
class="ui-btn__icon"
|
||||
src="{{iconSrc}}"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="ui-btn__text">{{text}}</text>
|
||||
</button>
|
||||
@@ -0,0 +1,92 @@
|
||||
.ui-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
border: none;
|
||||
padding: 0 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 48rpx;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.ui-btn::after { border: none; }
|
||||
|
||||
.ui-btn:active:not(.is-disabled) {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.ui-btn--block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.ui-btn--sm { height: 64rpx; font-size: 26rpx; padding: 0 24rpx; }
|
||||
.ui-btn--md { height: 80rpx; font-size: 30rpx; }
|
||||
.ui-btn--lg { height: 96rpx; font-size: 34rpx; padding: 0 40rpx; }
|
||||
.ui-btn--xl { height: 108rpx; font-size: 36rpx; padding: 0 48rpx; }
|
||||
|
||||
/* Variants */
|
||||
.ui-btn--primary {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.ui-btn--primary:active:not(.is-disabled) {
|
||||
box-shadow: 0 4rpx 12rpx rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
.ui-btn--outline {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: 2rpx solid rgba(var(--primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.ui-btn--outline:active:not(.is-disabled) {
|
||||
background: var(--primary-bg);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.ui-btn--danger {
|
||||
background: #FFFFFF;
|
||||
color: #E53935;
|
||||
border: 2rpx solid rgba(229, 57, 53, 0.3);
|
||||
}
|
||||
|
||||
.ui-btn--danger:active:not(.is-disabled) {
|
||||
background: rgba(229, 57, 53, 0.05);
|
||||
border-color: #E53935;
|
||||
}
|
||||
|
||||
.ui-btn--ghost {
|
||||
/* Use rgba on the theme's RGB triplet instead of --primary-bg (~5% alpha)
|
||||
so the soft secondary reads as colored rather than near-white. */
|
||||
background: rgba(var(--primary-rgb), 0.14);
|
||||
color: var(--primary);
|
||||
border: 2rpx solid rgba(var(--primary-rgb), 0.22);
|
||||
}
|
||||
|
||||
.ui-btn--ghost:active:not(.is-disabled) {
|
||||
background: rgba(var(--primary-rgb), 0.22);
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
|
||||
.ui-btn.is-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui-btn__icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ui-btn__text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
Component({
|
||||
options: { multipleSlots: true },
|
||||
properties: {
|
||||
variant: { type: String, value: '' }, // '' | 'soft' | 'in'
|
||||
padded: { type: Boolean, value: true },
|
||||
customStyle: { type: String, value: '' }
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<view class="ui-card {{variant}} {{padded ? '' : 'ui-card--flush'}}" style="{{customStyle}}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
@@ -0,0 +1,34 @@
|
||||
.ui-card {
|
||||
background: var(--card-bg, #FFFFFF);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-card--flush {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Soft variant: subtle background tint, no shadow */
|
||||
.ui-card.soft {
|
||||
background: rgba(var(--primary-rgb, 255, 107, 53), 0.04);
|
||||
box-shadow: none;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* Staggered entrance animation */
|
||||
.ui-card.in {
|
||||
animation: uiCardIn 0.45s ease both;
|
||||
}
|
||||
|
||||
.ui-card.in:nth-child(1) { animation-delay: 0.05s; }
|
||||
.ui-card.in:nth-child(2) { animation-delay: 0.15s; }
|
||||
.ui-card.in:nth-child(3) { animation-delay: 0.25s; }
|
||||
.ui-card.in:nth-child(4) { animation-delay: 0.35s; }
|
||||
|
||||
@keyframes uiCardIn {
|
||||
from { opacity: 0; transform: translateY(40rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
Component({
|
||||
options: { multipleSlots: true },
|
||||
properties: {
|
||||
visible: { type: Boolean, value: false },
|
||||
position: { type: String, value: 'bottom' }, // 'bottom' | 'center'
|
||||
showHandle: { type: Boolean, value: true },
|
||||
closeOnOverlay: { type: Boolean, value: true },
|
||||
customStyle: { type: String, value: '' }
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
if (!this.data.closeOnOverlay) return
|
||||
this.triggerEvent('close')
|
||||
},
|
||||
onNoop() { /* swallow bubble for inner touches */ }
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<view wx:if="{{visible}}" class="ui-modal ui-modal--{{position}}" catchtouchmove="onNoop">
|
||||
<view class="ui-modal__overlay" bindtap="onClose"></view>
|
||||
<view class="ui-modal__body" catchtap="onNoop" style="{{customStyle}}">
|
||||
<view wx:if="{{showHandle && position === 'bottom'}}" class="ui-modal__handle"></view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,61 @@
|
||||
.ui-modal {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ui-modal--bottom { display: flex; align-items: flex-end; justify-content: center; }
|
||||
.ui-modal--center { display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.ui-modal__overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
animation: uiModalFade 0.25s ease;
|
||||
}
|
||||
|
||||
.ui-modal__body {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-modal--bottom .ui-modal__body {
|
||||
width: 100%;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 28rpx 32rpx 40rpx;
|
||||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||||
animation: uiModalSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.ui-modal--center .ui-modal__body {
|
||||
width: 560rpx;
|
||||
border-radius: 28rpx;
|
||||
padding: 48rpx 40rpx 36rpx;
|
||||
animation: uiModalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-modal__handle {
|
||||
width: 64rpx;
|
||||
height: 8rpx;
|
||||
background: #DDD;
|
||||
border-radius: 4rpx;
|
||||
margin: 0 auto 24rpx;
|
||||
}
|
||||
|
||||
@keyframes uiModalFade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes uiModalSlideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uiModalPop {
|
||||
from { transform: scale(0); opacity: 0; }
|
||||
60% { transform: scale(1.05); }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
Reference in New Issue
Block a user