feat: 循环训练模式 + 语音补全 / 屏幕常亮 / 卡片渲染修复
循环训练(circuit)
- 新增 utils/circuitTimer.js 状态机: 工作->休息->...->完成, stop() 返回有效撑总秒(不含休息)
- 首页新增「循环训练·分组练习」入口 + stepper 配置弹窗
- 配置本地持久化 circuit_config(每组时长/组数/休息/每周目标), 下次自动预填
- 记录以 planId:'circuit' + mode:'circuit' 落库, duration 语义不变 -> 排行榜/统计/每日计划进度零改动
- 记录页展示「循环 N组xMs·休Rs」
计时器顶部循环进度面板
- 组进度点阵按组数等分铺满(flex:1 1 0, 去掉 max-width 封顶), 当前组以增高而非加宽强调
- 大号「X/Y 组」+ 四态阶段徽章(撑住/休息中/准备开始/已暂停) + 累计秒数副行
- 状态灯用纯 CSS 圆点(SVG 图标颜色烤死在 data URI 里, CSS 改不动)
- 超过 15 组自动降级为线性进度条; 面板不设固定高度, 规避真机大字体档裁字
修复: 循环训练全程无语音
- 根因: circuit 的 onTick 走 _circuitCue(只有震动), 从未调用 _remind
- 接入整场进度播报, 基准为 sets x holdPerSet(而非每组), 避免 4 组播 4 次「已完成一半」
- 新增 restStart/nextSet/lastSet 三条不含数字的词条, 客户端与 tts 云函数词表同步
- 修复必然撞车的时序: 偶数组时 halfway 与休息切换同一 tick, 加 2.6s 优先窗口让位
- 防吵闸门: 每组 <10s 不播过场语音, 休息 <5s 不播; 预载按模式取词条
训练期间屏幕常亮
- wx.setKeepScreenOn: onStart 开 / onUnload 关 / onShow 在 isRunning 时重新武装
- 切后台再回来该标志会被系统清掉, 故必须重新武装, 否则后半程丢语音与震动
- 低基础库与 Android 省电模式静默降级, 不弹 toast
修复: 首页打卡卡片左侧两个竖条
- 根因: ui-card 宿主节点无 display 声明为 inline, 页面侧加的 border 被打断成两个零宽行盒碎片
- ui-card 加 :host{display:block}, margin-bottom 从内部 view 上提到宿主
- 高亮由 border 改为 box-shadow spread 描边(不占布局, 无跳动) + 补 border-radius
- 连带修复失效的交错入场: nth-child 跨组件边界恒匹配 1, 改为 index 属性驱动内联 animation-delay, 14 处调用点补序号
注意: tts 云函数需重新部署, 否则新增的 3 条词条返回 Unknown prompt key(静默降级不报错)
This commit is contained in:
@@ -9,6 +9,221 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---- 循环训练进度面板 ----
|
||||
注意:整块不设固定 height,靠 padding 撑开。真机大字体档下文字会被微信
|
||||
放大,固定高度 + overflow 会把数字裁掉(项目里踩过这个坑)。 */
|
||||
.circuit-bar {
|
||||
/* 抬一层:呼吸光晕(.breathe-ring, z-index:0)在 DOM 里排在本面板之后,
|
||||
不抬层会把橙色晕染盖到卡片上。 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 620rpx;
|
||||
max-width: 86%;
|
||||
box-sizing: border-box;
|
||||
padding: 26rpx 32rpx 22rpx;
|
||||
margin-bottom: 12rpx;
|
||||
background: var(--card-bg);
|
||||
border: 1rpx solid rgba(var(--primary-rgb), 0.14);
|
||||
border-radius: 28rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
transition: border-color 0.35s ease, box-shadow 0.35s ease;
|
||||
animation: circuitBarIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
|
||||
}
|
||||
|
||||
/* 休息态整块降温:边框转成 success 绿,和"撑住"的主色态形成对比 */
|
||||
.circuit-bar.is-rest {
|
||||
border-color: rgba(var(--success-rgb), 0.32);
|
||||
box-shadow: 0 6rpx 20rpx rgba(var(--success-rgb), 0.10);
|
||||
}
|
||||
|
||||
@keyframes circuitBarIn {
|
||||
0% { opacity: 0; transform: translateY(-16rpx); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* --- 组进度点阵 ---
|
||||
整行铺满面板内宽,每段按组数严格等分(分段进度条式)。 */
|
||||
.circuit-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
/* 锁住行高:当前组比其它段高 6rpx,不锁行高会在 idle→running 时整块跳一下 */
|
||||
min-height: 18rpx;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
/* flex:1 1 0 + min-width:0 → 每段等分剩余宽度,与内容无关。
|
||||
不设 max-width:一旦封顶,组数少时点阵就只占左边一截(此前的问题)。
|
||||
当前组不再靠"加宽"强调(那会破坏等分),改为增高+发光,宽度恒等分。 */
|
||||
.circuit-dot {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
background: var(--bg-soft);
|
||||
transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.circuit-dot.is-done {
|
||||
background: var(--primary);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* 当前组:增高 + 渐变 + 发光呼吸,一眼锁定进度位置(宽度仍等分) */
|
||||
.circuit-dot.is-active {
|
||||
height: 18rpx;
|
||||
border-radius: 9rpx;
|
||||
opacity: 1;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||
box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.55);
|
||||
animation: circuitDotPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 休息时高亮"下一组",给用户一个即将开始的预告焦点 */
|
||||
.circuit-dot.is-next {
|
||||
height: 18rpx;
|
||||
border-radius: 9rpx;
|
||||
background: rgba(var(--success-rgb), 0.45);
|
||||
animation: circuitDotPulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes circuitDotPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.55; }
|
||||
}
|
||||
|
||||
/* 暂停时冻结所有呼吸动画,静止本身就是"已暂停"的信号 */
|
||||
.circuit-bar.is-paused .circuit-dot {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* --- 组数过多时的线性降级条 --- */
|
||||
.circuit-track {
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
background: var(--bg-soft);
|
||||
overflow: hidden;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.circuit-track-fill {
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
/* --- 主信息行:大数字 + 阶段徽章 --- */
|
||||
.circuit-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.circuit-count {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.circuit-count-num {
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.circuit-count-total {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
|
||||
.circuit-count-unit {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* --- 阶段徽章 --- */
|
||||
.circuit-phase {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 状态指示灯用 CSS 画而非 icon:项目里的 SVG 图标颜色烤死在 data URI 里,
|
||||
CSS 改不动;这里需要跟随状态换色,纯 CSS 圆点是唯一干净的做法。 */
|
||||
.circuit-phase-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.circuit-phase-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 工作态:主色渐变实心 + 白灯白字 */
|
||||
.circuit-phase--work {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
box-shadow: 0 4rpx 14rpx rgba(var(--primary-rgb), 0.32);
|
||||
}
|
||||
.circuit-phase--work .circuit-phase-dot {
|
||||
background: #FFFFFF;
|
||||
animation: phaseDotBlink 1.2s ease-in-out infinite;
|
||||
}
|
||||
.circuit-phase--work .circuit-phase-text { color: #FFFFFF; }
|
||||
|
||||
/* 休息态:绿色淡底,视觉降温 */
|
||||
.circuit-phase--rest {
|
||||
background: rgba(var(--success-rgb), 0.14);
|
||||
}
|
||||
.circuit-phase--rest .circuit-phase-dot {
|
||||
background: var(--success);
|
||||
animation: phaseDotBlink 1.8s ease-in-out infinite;
|
||||
}
|
||||
.circuit-phase--rest .circuit-phase-text { color: var(--success); }
|
||||
|
||||
/* 待机态 / 暂停态:中性灰,不抢视觉 */
|
||||
.circuit-phase--idle,
|
||||
.circuit-phase--pause {
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
.circuit-phase--idle .circuit-phase-dot,
|
||||
.circuit-phase--pause .circuit-phase-dot {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
.circuit-phase--idle .circuit-phase-text,
|
||||
.circuit-phase--pause .circuit-phase-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@keyframes phaseDotBlink {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
/* --- 副信息行 --- */
|
||||
.circuit-sub {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ---- ring wrapper ---- */
|
||||
.ring-wrapper {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user