Files
wx_pbzc/pages/settings/settings.wxss
T
lc 1d55df72b3 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)
2026-06-10 17:23:13 +08:00

443 lines
7.7 KiB
Plaintext

.section-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.section-icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.section-header .section-title {
margin-bottom: 0;
}
/* ---- theme picker ---- */
.theme-list { margin-top: 0; }
.theme-item {
display: flex;
align-items: center;
padding: 22rpx 0;
border-bottom: 1rpx solid var(--border);
transition: background 0.2s ease;
}
.theme-item:last-child { border-bottom: none; }
.theme-item.active {
background: var(--primary-bg);
margin: 0 -32rpx;
padding-left: 32rpx;
padding-right: 32rpx;
border-radius: 16rpx;
border-bottom: none;
}
.theme-item.active + .theme-item {
border-top: 1rpx solid transparent;
}
.theme-color-dot {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
margin-right: 20rpx;
flex-shrink: 0;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
transition: transform 0.2s ease;
}
.theme-item:active .theme-color-dot {
transform: scale(1.15);
}
.theme-name {
flex: 1;
font-size: 28rpx;
color: var(--text);
}
.theme-check-img {
width: 32rpx;
height: 32rpx;
}
/* ---- plan list ---- */
.plan-list { margin-top: 0; }
.plan-item {
display: flex;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid var(--border);
}
.plan-item:last-child { border-bottom: none; }
.plan-item.active {
background: var(--primary-bg);
margin: 0 -32rpx;
padding-left: 32rpx;
padding-right: 32rpx;
border-radius: 16rpx;
border-bottom: none;
}
.plan-radio {
width: 40rpx;
height: 40rpx;
border: 3rpx solid #DDD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
flex-shrink: 0;
transition: border-color 0.2s;
}
.plan-item.active .plan-radio {
border-color: var(--primary);
}
.radio-dot {
width: 22rpx;
height: 22rpx;
background: var(--primary);
border-radius: 50%;
animation: popIn 0.3s ease;
}
.plan-content {
flex: 1;
display: flex;
flex-direction: column;
}
.plan-item-name {
font-size: 28rpx;
font-weight: 600;
color: var(--text);
}
.plan-item-desc {
font-size: 22rpx;
color: var(--text-secondary);
margin-top: 4rpx;
}
.plan-check-img {
width: 32rpx;
height: 32rpx;
}
.plan-actions {
display: flex;
align-items: center;
gap: 8rpx;
flex-shrink: 0;
}
.plan-edit-btn {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
transition: background 0.15s ease;
}
.plan-edit-btn:active {
background: rgba(var(--primary-rgb), 0.12);
}
.plan-edit-img {
width: 36rpx;
height: 36rpx;
opacity: 0.55;
}
.plan-item.active .plan-edit-img {
opacity: 0.85;
}
/* ---- setting rows ---- */
.setting-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-left {
display: flex;
align-items: center;
}
.setting-icon {
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
}
.setting-label {
font-size: 28rpx;
color: var(--text);
}
.setting-value {
font-size: 28rpx;
color: var(--primary);
}
/* ---- about ---- */
.about-list { margin-top: 12rpx; }
.about-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18rpx 0;
border-bottom: 1rpx solid var(--border);
}
.about-row:last-child { border-bottom: none; }
.about-label {
font-size: 26rpx;
color: var(--text-secondary);
}
.about-value {
font-size: 26rpx;
color: var(--text);
}
.about-link {
color: var(--primary);
font-weight: 500;
}
.about-footer {
margin-top: 24rpx;
padding-top: 20rpx;
border-top: 1rpx solid var(--border);
text-align: center;
}
.about-copy {
font-size: 22rpx;
color: #CCCCCC;
}
/* ---- plan editor modal ---- */
/* 普通 view 实现的底部 sheet,不用 ui-modal 是因为 WeChat 自定义组件根元素
上 position: fixed 会被运行时吞掉,导致 body 落到容器末尾(非浮层)。 */
.plan-editor-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1000;
display: flex;
align-items: flex-end;
justify-content: center;
}
.plan-editor-mask__bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.45);
animation: planEditorFade 0.25s ease;
}
.plan-editor-sheet {
position: relative;
width: 100%;
max-height: 88vh;
overflow-y: auto;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 32rpx 32rpx 0 0;
padding: 12rpx 32rpx 40rpx;
/* Sheet is z-index 1000 above the tab bar (z-index 999), but the tab bar
still visually covers the bottom of the sheet. Add the tab bar's
height (110rpx + safe area) to padding-bottom so "保存/取消" sit
clearly above the tab bar. */
padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
animation: planEditorSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.plan-editor-handle {
width: 64rpx;
height: 8rpx;
background: #DDD;
border-radius: 4rpx;
margin: 0 auto 16rpx;
}
@keyframes planEditorFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes planEditorSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.editor-title {
display: block;
text-align: center;
font-size: 32rpx;
font-weight: 700;
color: var(--text);
margin-bottom: 20rpx;
}
.editor-field {
display: flex;
flex-direction: column;
margin-bottom: 14rpx;
}
.editor-row {
display: flex;
gap: 12rpx;
}
.editor-row .editor-field-half {
flex: 1;
}
.editor-label {
font-size: 22rpx;
color: var(--text-secondary);
margin-bottom: 6rpx;
line-height: 1;
}
.editor-input {
height: 68rpx;
background: #F5F5F5;
border-radius: 10rpx;
padding: 0 16rpx;
font-size: 26rpx;
color: var(--text);
box-sizing: border-box;
width: 100%;
}
.editor-preview {
margin-top: 6rpx;
background: #FAFAFA;
border-radius: 14rpx;
padding: 12rpx 16rpx;
}
.editor-preview-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8rpx;
}
.editor-preview-title {
font-size: 22rpx;
font-weight: 600;
color: var(--text);
}
.editor-preview-meta {
font-size: 20rpx;
color: var(--text-secondary);
}
.editor-preview-list {
/* No fixed max-height: the modal body scrolls, preview expands inline. */
min-height: 60rpx;
}
.editor-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8rpx 0;
border-bottom: 1rpx solid #EEE;
font-size: 24rpx;
}
.editor-preview-row:last-child {
border-bottom: none;
}
.editor-preview-day {
color: var(--text);
}
.editor-preview-target {
color: var(--primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.editor-preview-empty {
text-align: center;
color: var(--text-secondary);
font-size: 22rpx;
padding: 16rpx 0;
}
.editor-actions {
display: flex;
gap: 12rpx;
margin-top: 20rpx;
}
.editor-action-reset,
.editor-action-save {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 600;
transition: opacity 0.15s ease, background 0.15s ease;
}
.editor-action-reset {
background: #FFFFFF;
color: var(--text-secondary);
border: 2rpx solid var(--border);
}
.editor-action-reset:active {
background: #F5F5F5;
}
.editor-action-save {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #FFFFFF;
box-shadow: 0 4rpx 12rpx rgba(var(--primary-rgb), 0.25);
}
.editor-action-save:active {
opacity: 0.9;
}
.editor-cancel {
display: block;
text-align: center;
font-size: 26rpx;
color: var(--text-secondary);
padding: 12rpx 0 0;
}