backup: snapshot before optimization
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
# CodeGraph data files
|
||||
# These are local to each machine and should not be committed
|
||||
|
||||
# Database
|
||||
*.db
|
||||
*.db-wal
|
||||
*.db-shm
|
||||
|
||||
# Cache
|
||||
cache/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
|
||||
# Hook markers
|
||||
.dirty
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"pid": 75366,
|
||||
"version": "0.9.7",
|
||||
"socketPath": "/Users/liubleed/Documents/wx_pbzc/.codegraph/daemon.sock",
|
||||
"startedAt": 1780561314477
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
var themeMod = require('./utils/theme')
|
||||
|
||||
App({
|
||||
onLaunch: function () {
|
||||
var settings = wx.getStorageSync('user_settings')
|
||||
if (!settings) {
|
||||
wx.setStorageSync('user_settings', {
|
||||
planId: 'beginner',
|
||||
dailyReminder: true,
|
||||
reminderTime: '08:00',
|
||||
voiceGuide: true,
|
||||
vibrate: true
|
||||
})
|
||||
}
|
||||
var streak = wx.getStorageSync('current_streak')
|
||||
if (!streak) {
|
||||
wx.setStorageSync('current_streak', { count: 0, lastDate: '' })
|
||||
}
|
||||
this.globalData.theme = themeMod.getCurrentTheme()
|
||||
},
|
||||
|
||||
globalData: {
|
||||
planId: 'beginner',
|
||||
theme: null
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/timer/timer",
|
||||
"pages/records/records",
|
||||
"pages/settings/settings"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#FF6B35",
|
||||
"navigationBarTitleText": "平板支撑训练",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#F5F5F5"
|
||||
},
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"color": "#999999",
|
||||
"selectedColor": "#FF6B35",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "black",
|
||||
"list": [
|
||||
{ "pagePath": "pages/index/index", "text": "训练" },
|
||||
{ "pagePath": "pages/records/records", "text": "记录" },
|
||||
{ "pagePath": "pages/settings/settings", "text": "设置" }
|
||||
]
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
page {
|
||||
--primary: #FF6B35;
|
||||
--primary-light: #FF8C5A;
|
||||
--primary-bg: #FFF3ED;
|
||||
--primary-rgb: 255,107,53;
|
||||
--text: #333333;
|
||||
--text-secondary: #999999;
|
||||
--bg: #F5F5F5;
|
||||
--card-bg: #FFFFFF;
|
||||
--success: #4CAF50;
|
||||
--border: #EEEEEE;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 28rpx;
|
||||
color: var(--text);
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24rpx;
|
||||
padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
animation: cardIn 0.45s ease both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.05s; }
|
||||
.card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.card:nth-child(3) { animation-delay: 0.25s; }
|
||||
.card:nth-child(4) { animation-delay: 0.35s; }
|
||||
|
||||
@keyframes cardIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 48rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 4rpx 12rpx rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
/* ---- pulse ring (used on timer page) ---- */
|
||||
@keyframes breathePulse {
|
||||
0%, 100% {
|
||||
transform: scale(0.92);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08);
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breathePulseFast {
|
||||
0%, 100% {
|
||||
transform: scale(0.94);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.06);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- float ---- */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12rpx); }
|
||||
}
|
||||
|
||||
/* ---- pop / bounce ---- */
|
||||
@keyframes popIn {
|
||||
0% { transform: scale(0); opacity: 0; }
|
||||
60% { transform: scale(1.15); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes bounceSoft {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-16rpx); }
|
||||
50% { transform: translateY(0); }
|
||||
70% { transform: translateY(-6rpx); }
|
||||
}
|
||||
|
||||
/* ---- shimmer ---- */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* ---- spin ---- */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* ---- icon sizing ---- */
|
||||
.icon {
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-lg { font-size: 40rpx; }
|
||||
.icon-md { font-size: 28rpx; }
|
||||
.icon-sm { font-size: 22rpx; }
|
||||
|
||||
.icon-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
var util = require('../../utils/util')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
year: { type: Number, value: new Date().getFullYear() },
|
||||
month: { type: Number, value: new Date().getMonth() + 1 },
|
||||
records: { type: Array, value: [] }
|
||||
},
|
||||
|
||||
data: {
|
||||
weeks: []
|
||||
},
|
||||
|
||||
observers: {
|
||||
'year, month, records': function (year, month, records) {
|
||||
this._compute(year, month, records)
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
this._compute(this.properties.year, this.properties.month, this.properties.records)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_compute: function (year, month, records) {
|
||||
var weeks = util.getMonthCalendar(year, month)
|
||||
var recordMap = {}
|
||||
if (records && records.length) {
|
||||
records.forEach(function (r) {
|
||||
var d = parseInt(r.date.split('-')[2])
|
||||
recordMap[d] = (recordMap[d] || 0) + r.duration
|
||||
})
|
||||
}
|
||||
|
||||
var data = weeks.map(function (week) {
|
||||
return week.map(function (day) {
|
||||
if (!day) return null
|
||||
var duration = recordMap[day] || 0
|
||||
var 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: day, duration: duration, color: color }
|
||||
})
|
||||
})
|
||||
|
||||
this.setData({ weeks: data })
|
||||
},
|
||||
|
||||
onDayTap: function (e) {
|
||||
var day = e.currentTarget.dataset.day
|
||||
if (!day) return
|
||||
var cell = null
|
||||
var weeks = this.data.weeks
|
||||
for (var i = 0; i < weeks.length; i++) {
|
||||
for (var j = 0; j < weeks[i].length; j++) {
|
||||
var c = weeks[i][j]
|
||||
if (c && c.day === day) { cell = c; break }
|
||||
}
|
||||
if (cell) break
|
||||
}
|
||||
if (!cell || cell.duration <= 0) return
|
||||
this.triggerEvent('daytap', {
|
||||
year: this.properties.year,
|
||||
month: this.properties.month,
|
||||
day: day,
|
||||
duration: cell.duration
|
||||
})
|
||||
},
|
||||
|
||||
getHeatColor: function (cell) {
|
||||
if (!cell || cell.duration <= 0) return 'transparent'
|
||||
var d = cell.duration
|
||||
if (d < 30) return '#FFE0D0'
|
||||
if (d < 60) return '#FFB088'
|
||||
if (d < 120) return '#FF6B35'
|
||||
return '#E05520'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<view class="heatmap-container">
|
||||
<view class="calendar-header">
|
||||
<text class="month-label">{{year}}年{{month}}月</text>
|
||||
<view class="weekday-labels">
|
||||
<text class="weekday" wx:for="{{['日','一','二','三','四','五','六']}}" wx:key="*this">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="calendar-grid">
|
||||
<view class="calendar-week" wx:for="{{weeks}}" wx:key="index">
|
||||
<view
|
||||
class="calendar-day {{cell && cell.duration > 0 ? 'has-data' : 'empty'}}"
|
||||
wx:for="{{item}}"
|
||||
wx:for-item="cell"
|
||||
wx:key="index"
|
||||
style="background-color: {{cell ? cell.color : 'transparent'}};"
|
||||
data-day="{{cell ? cell.day : ''}}"
|
||||
bindtap="onDayTap"
|
||||
>
|
||||
<text class="day-num" wx:if="{{cell}}">{{cell.day}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</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>
|
||||
<text class="legend-label">多</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,77 @@
|
||||
.heatmap-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.month-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weekday-labels {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
width: 56rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.calendar-week {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-day.empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.day-num {
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.heat-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.legend-block {
|
||||
width: 32rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
var util = require('../../utils/util')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
duration: { type: Number, value: 60 },
|
||||
remaining: { type: Number, value: 60 },
|
||||
size: { type: Number, value: 280 },
|
||||
ringWidth: { type: Number, value: 14 },
|
||||
status: { type: String, value: 'idle' },
|
||||
primaryColor: { type: String, value: '#FF6B35' },
|
||||
primaryLightColor: { type: String, value: '#FF8C5A' }
|
||||
},
|
||||
|
||||
data: {
|
||||
displayTime: '00:00',
|
||||
statusText: '准备开始'
|
||||
},
|
||||
|
||||
observers: {
|
||||
'remaining, status, duration, size, ringWidth, primaryColor': function () {
|
||||
var texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
|
||||
this.setData({
|
||||
displayTime: util.formatTime(this.data.remaining),
|
||||
statusText: texts[this.data.status] || ''
|
||||
})
|
||||
this._draw()
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
var self = this
|
||||
var query = this.createSelectorQuery()
|
||||
query.select('#ringCanvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(function (res) {
|
||||
if (!res || !res[0] || !res[0].node) return
|
||||
var canvas = res[0].node
|
||||
var dpr = wx.getSystemInfoSync().pixelRatio || 2
|
||||
var displaySize = self.data.size
|
||||
canvas.width = displaySize * dpr
|
||||
canvas.height = displaySize * dpr
|
||||
self._ctx = canvas.getContext('2d')
|
||||
self._dpr = dpr
|
||||
self._draw()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_draw: function () {
|
||||
var ctx = this._ctx
|
||||
if (!ctx) return
|
||||
|
||||
var size = this.data.size
|
||||
var dpr = this._dpr
|
||||
var ringWidth = this.data.ringWidth
|
||||
var duration = this.data.duration
|
||||
var remaining = this.data.remaining
|
||||
var primaryColor = this.data.primaryColor
|
||||
|
||||
var w = size * dpr
|
||||
var h = size * dpr
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
|
||||
var cx = w / 2
|
||||
var cy = h / 2
|
||||
var radius = (size - ringWidth) / 2 * dpr
|
||||
var lw = ringWidth * dpr
|
||||
|
||||
// track ring
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = '#EEEEEE'
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
|
||||
// progress arc (clockwise from 12 o'clock, represents remaining time)
|
||||
var ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
|
||||
if (ratio > 0.001) {
|
||||
var startAngle = -Math.PI / 2
|
||||
var endAngle = startAngle + ratio * Math.PI * 2
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, startAngle, endAngle)
|
||||
ctx.strokeStyle = primaryColor
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<view class="ring-wrap" style="width: {{size}}rpx; height: {{size}}rpx;">
|
||||
<canvas type="2d" id="ringCanvas" class="ring-canvas" style="width: {{size}}rpx; height: {{size}}rpx;"></canvas>
|
||||
<view class="ring-center">
|
||||
<text class="time-text">{{displayTime}}</text>
|
||||
<text class="status-text">{{statusText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,37 @@
|
||||
.ring-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ring-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 80rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
var themeMod = require('../utils/theme')
|
||||
|
||||
Component({
|
||||
data: {
|
||||
selected: 0,
|
||||
themeStyle: ''
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
attached: function () {
|
||||
var theme = themeMod.getCurrentTheme()
|
||||
this.setData({ themeStyle: themeMod.getThemeStyle(theme) })
|
||||
}
|
||||
},
|
||||
|
||||
pageLifetimes: {
|
||||
show: function () {
|
||||
var theme = themeMod.getCurrentTheme()
|
||||
this.setData({ themeStyle: themeMod.getThemeStyle(theme) })
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
switchTab: function (e) {
|
||||
var index = e.currentTarget.dataset.index
|
||||
var pages = [
|
||||
'/pages/index/index',
|
||||
'/pages/records/records',
|
||||
'/pages/settings/settings'
|
||||
]
|
||||
|
||||
if (index === this.data.selected) return
|
||||
|
||||
wx.switchTab({ url: pages[index] })
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<view class="tab-bar" style="{{themeStyle}}">
|
||||
<view
|
||||
class="tab-item {{selected === 0 ? 'active' : ''}}"
|
||||
data-index="0"
|
||||
bindtap="switchTab"
|
||||
>
|
||||
<view class="tab-icon">
|
||||
<view class="icon-home {{selected === 0 ? 'active' : ''}}">
|
||||
<view class="home-roof"></view>
|
||||
<view class="home-body"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="tab-text">训练</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="tab-item {{selected === 1 ? 'active' : ''}}"
|
||||
data-index="1"
|
||||
bindtap="switchTab"
|
||||
>
|
||||
<view class="tab-icon">
|
||||
<view class="icon-records {{selected === 1 ? 'active' : ''}}">
|
||||
<view class="bar bar1"></view>
|
||||
<view class="bar bar2"></view>
|
||||
<view class="bar bar3"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="tab-text">记录</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="tab-item {{selected === 2 ? 'active' : ''}}"
|
||||
data-index="2"
|
||||
bindtap="switchTab"
|
||||
>
|
||||
<view class="tab-icon">
|
||||
<view class="icon-settings {{selected === 2 ? 'active' : ''}}">
|
||||
<view class="gear-outer"></view>
|
||||
<view class="gear-center"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="tab-text">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,146 @@
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6rpx 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- icon: home ---- */
|
||||
.icon-home {
|
||||
position: relative;
|
||||
width: 44rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .icon-home {
|
||||
animation: bounceSoft 0.5s ease;
|
||||
}
|
||||
|
||||
.home-roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 22rpx solid transparent;
|
||||
border-right: 22rpx solid transparent;
|
||||
border-bottom: 18rpx solid #888;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tab-item.active .home-roof {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.home-body {
|
||||
width: 22rpx;
|
||||
height: 20rpx;
|
||||
background: #888;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 11rpx;
|
||||
border-radius: 2rpx 2rpx 0 0;
|
||||
}
|
||||
|
||||
.tab-item.active .home-body {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* ---- icon: records (3 bars) ---- */
|
||||
.icon-records {
|
||||
width: 40rpx;
|
||||
height: 34rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .icon-records {
|
||||
animation: bounceSoft 0.5s ease;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 6rpx;
|
||||
background: #888;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.bar1 { width: 100%; }
|
||||
.bar2 { width: 65%; }
|
||||
.bar3 { width: 80%; }
|
||||
|
||||
.tab-item.active .bar {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* ---- icon: settings (gear) ---- */
|
||||
.icon-settings {
|
||||
position: relative;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .icon-settings {
|
||||
animation: bounceSoft 0.5s ease;
|
||||
}
|
||||
|
||||
.gear-outer {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 5rpx solid #888;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 3rpx;
|
||||
left: 3rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .gear-outer {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.gear-center {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #888;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
left: 15rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .gear-center {
|
||||
background: var(--primary);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
var storage = require('../../utils/storage')
|
||||
var planMod = require('../../utils/plan')
|
||||
var util = require('../../utils/util')
|
||||
var themeMod = require('../../utils/theme')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
||||
themeStyle: '',
|
||||
todayTarget: 0,
|
||||
todayDone: false,
|
||||
todayDuration: 0,
|
||||
todayTargetText: '',
|
||||
streakCount: 0,
|
||||
planName: '',
|
||||
planDay: 1,
|
||||
planTotal: 7,
|
||||
planProgress: 0,
|
||||
showPicker: false,
|
||||
presets: [30, 60, 90, 120, 180, 300],
|
||||
customDuration: 60,
|
||||
customInput: ''
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
themeMod.applyThemeToPage(this)
|
||||
try {
|
||||
var tb = this.getTabBar()
|
||||
if (tb) tb.setData({ selected: 0 })
|
||||
} catch (e) {}
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onPullDownRefresh: function () {
|
||||
this.refresh()
|
||||
wx.stopPullDownRefresh()
|
||||
},
|
||||
|
||||
refresh: function () {
|
||||
var settings = storage.getSettings()
|
||||
var streak = storage.getStreak()
|
||||
var todayRecord = storage.getTodayRecord()
|
||||
|
||||
var records = []
|
||||
var allRecords = storage.getRecords()
|
||||
Object.keys(allRecords).forEach(function (key) {
|
||||
records = records.concat(allRecords[key])
|
||||
})
|
||||
|
||||
var plan = planMod.getPlan(settings.planId)
|
||||
var planDay = planMod.getPlanDay(settings.planId, records)
|
||||
var target = planMod.getTodayTarget(settings.planId, Math.min(planDay, plan.totalDays))
|
||||
|
||||
this.setData({
|
||||
todayTarget: target,
|
||||
todayDone: todayRecord && todayRecord.duration >= target,
|
||||
todayDuration: todayRecord ? todayRecord.duration : 0,
|
||||
todayTargetText: util.formatTime(target),
|
||||
streakCount: streak.count,
|
||||
planName: plan.name,
|
||||
planDay: Math.min(planDay, plan.totalDays),
|
||||
planTotal: plan.totalDays,
|
||||
planProgress: Math.round((Math.min(planDay, plan.totalDays) / plan.totalDays) * 100)
|
||||
})
|
||||
},
|
||||
|
||||
onStartTrain: function () {
|
||||
wx.navigateTo({ url: '/pages/timer/timer' })
|
||||
},
|
||||
|
||||
onFreeTrain: function () {
|
||||
this.setData({ showPicker: true, customInput: '', customDuration: 60 })
|
||||
},
|
||||
|
||||
onClosePicker: function () {
|
||||
this.setData({ showPicker: false })
|
||||
},
|
||||
|
||||
onSelectPreset: function (e) {
|
||||
var val = e.currentTarget.dataset.value
|
||||
this.setData({ customDuration: val, customInput: '' })
|
||||
},
|
||||
|
||||
onCustomInput: function (e) {
|
||||
var val = parseInt(e.detail.value) || 0
|
||||
this.setData({ customInput: e.detail.value, customDuration: val })
|
||||
},
|
||||
|
||||
onConfirmFree: function () {
|
||||
var dur = this.data.customDuration
|
||||
if (!dur || dur <= 0) {
|
||||
wx.showToast({ title: '请输入有效时长', icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.setData({ showPicker: false })
|
||||
wx.navigateTo({ url: '/pages/timer/timer?free=' + dur })
|
||||
},
|
||||
|
||||
noop: function () {}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "平板支撑训练"
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<view class="container" style="{{themeStyle}}">
|
||||
|
||||
<!-- 顶部问候 -->
|
||||
<view class="greeting-row">
|
||||
<view class="greeting-text">
|
||||
<text class="greeting-emoji">{{todayDone ? '💪' : '👋'}}</text>
|
||||
<text class="greeting-title">{{todayDone ? '太棒了！' : '准备好了吗？'}}</text>
|
||||
</view>
|
||||
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 连续打卡卡片 -->
|
||||
<view class="header-card card">
|
||||
<view class="streak-section">
|
||||
<text class="streak-icon">🔥</text>
|
||||
<text class="streak-num">{{streakCount}}</text>
|
||||
<text class="streak-label">连续打卡</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="plan-info">
|
||||
<view class="plan-badge">
|
||||
<text class="plan-badge-icon">📋</text>
|
||||
<text class="plan-badge-text">{{planName}}</text>
|
||||
</view>
|
||||
<view class="progress-bar-wrap">
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" style="width: {{planProgress}}%;">
|
||||
<view class="progress-glow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日目标卡片 -->
|
||||
<view class="target-section card">
|
||||
<view class="target-header">
|
||||
<text class="target-icon">🎯</text>
|
||||
<text class="section-title">今日目标</text>
|
||||
</view>
|
||||
<view class="target-display">
|
||||
<view class="target-ring">
|
||||
<text class="target-time">{{todayTargetText}}</text>
|
||||
</view>
|
||||
<text class="target-unit">平板支撑</text>
|
||||
</view>
|
||||
<view class="today-status">
|
||||
<block wx:if="{{todayDone}}">
|
||||
<view class="done-badge">
|
||||
<text class="done-emoji">✨</text>
|
||||
<text class="done-text">今日已完成 {{todayDuration}} 秒</text>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text class="pending-text">⏳ 还未开始训练</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区 -->
|
||||
<view class="action-buttons">
|
||||
<button class="start-btn btn-primary" bindtap="onStartTrain">
|
||||
<text class="btn-icon">{{todayDone ? '🔄' : '▶'}}</text>
|
||||
<text>{{todayDone ? '再次训练' : '开始训练'}}</text>
|
||||
</button>
|
||||
|
||||
<button class="free-btn" bindtap="onFreeTrain">
|
||||
<text class="free-icon">⏱</text>
|
||||
<text>自由训练 · 自定义时长</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 小提示 -->
|
||||
<view class="tip-card">
|
||||
<text class="tip-icon">💡</text>
|
||||
<text class="tip-text">保持身体成一条直线，核心收紧，均匀呼吸</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间选择弹窗 -->
|
||||
<view class="modal-overlay" wx:if="{{showPicker}}" bindtap="onClosePicker">
|
||||
<view class="picker-modal" catchtap="noop">
|
||||
<text class="picker-title">⏱ 选择训练时长</text>
|
||||
<view class="preset-grid">
|
||||
<view
|
||||
class="preset-item {{customDuration === item ? 'selected' : ''}}"
|
||||
wx:for="{{presets}}"
|
||||
wx:key="*this"
|
||||
data-value="{{item}}"
|
||||
bindtap="onSelectPreset"
|
||||
>
|
||||
<text class="preset-num">{{item}}</text>
|
||||
<text class="preset-unit">秒</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="custom-input-row">
|
||||
<text class="custom-label">自定义：</text>
|
||||
<input
|
||||
class="custom-input"
|
||||
type="number"
|
||||
placeholder="输入秒数"
|
||||
value="{{customInput}}"
|
||||
bindinput="onCustomInput"
|
||||
/>
|
||||
<text class="custom-label">秒</text>
|
||||
</view>
|
||||
<button class="picker-confirm btn-primary" bindtap="onConfirmFree">
|
||||
开始自由训练
|
||||
</button>
|
||||
<text class="picker-cancel" bindtap="onClosePicker">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,414 @@
|
||||
/* ---- greeting ---- */
|
||||
.greeting-row {
|
||||
padding: 16rpx 8rpx 24rpx;
|
||||
animation: cardIn 0.4s ease both;
|
||||
}
|
||||
|
||||
.greeting-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.greeting-emoji {
|
||||
font-size: 40rpx;
|
||||
margin-right: 12rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.greeting-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.greeting-sub {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-left: 56rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---- header card ---- */
|
||||
.header-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 36rpx 32rpx;
|
||||
}
|
||||
|
||||
.streak-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
|
||||
.streak-icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 4rpx;
|
||||
line-height: 1;
|
||||
animation: float 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.streak-num {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.streak-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 2rpx;
|
||||
height: 80rpx;
|
||||
background: var(--border);
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
|
||||
.plan-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.plan-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.plan-badge-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.plan-badge-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.progress-bar-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8rpx;
|
||||
background: var(--border);
|
||||
border-radius: 4rpx;
|
||||
overflow: visible;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||
border-radius: 4rpx;
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-glow {
|
||||
position: absolute;
|
||||
right: -4rpx;
|
||||
top: -4rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10rpx var(--primary);
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---- target card ---- */
|
||||
.target-section {
|
||||
text-align: center;
|
||||
padding: 36rpx 32rpx;
|
||||
}
|
||||
|
||||
.target-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.target-header .section-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.target-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.target-display {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.target-ring {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
|
||||
border: 4rpx solid rgba(var(--primary-rgb), 0.15);
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.target-time {
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.target-unit {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.today-status {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.done-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(76, 175, 80, 0.08);
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.done-emoji {
|
||||
font-size: 28rpx;
|
||||
margin-right: 6rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.done-text {
|
||||
font-size: 26rpx;
|
||||
color: var(--success);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pending-text {
|
||||
font-size: 26rpx;
|
||||
color: #CCC;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---- action buttons ---- */
|
||||
.action-buttons {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.free-btn {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
background: transparent;
|
||||
border: 2rpx solid rgba(var(--primary-rgb), 0.3);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 48rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.free-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.free-btn:active {
|
||||
background: var(--primary-bg);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.free-icon {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---- tip card ---- */
|
||||
.tip-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-top: 32rpx;
|
||||
background: rgba(var(--primary-rgb), 0.04);
|
||||
border-radius: 20rpx;
|
||||
animation: cardIn 0.45s 0.4s ease both;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ---- picker modal ---- */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.picker-modal {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 40rpx 32rpx;
|
||||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||||
animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.preset-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.preset-item {
|
||||
flex: 0 0 calc(33.33% - 12rpx);
|
||||
background: #F5F5F5;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preset-item:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.preset-item.selected {
|
||||
background: var(--primary-bg);
|
||||
border: 2rpx solid var(--primary);
|
||||
}
|
||||
|
||||
.preset-num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.preset-item.selected .preset-num {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.preset-unit {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.custom-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.custom-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 160rpx;
|
||||
height: 64rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
.picker-confirm {
|
||||
width: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.picker-cancel {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
var storage = require('../../utils/storage')
|
||||
var util = require('../../utils/util')
|
||||
var themeMod = require('../../utils/theme')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
||||
themeStyle: '',
|
||||
totalDuration: 0,
|
||||
totalDurationText: '',
|
||||
totalSessions: 0,
|
||||
maxDuration: 0,
|
||||
maxDurationText: '',
|
||||
currentYear: new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth() + 1,
|
||||
monthRecords: [],
|
||||
historyList: [],
|
||||
showDayDetail: false,
|
||||
dayDetail: {}
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
themeMod.applyThemeToPage(this)
|
||||
try {
|
||||
var tb = this.getTabBar()
|
||||
if (tb) tb.setData({ selected: 1 })
|
||||
} catch (e) {}
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onPullDownRefresh: function () {
|
||||
this.refresh()
|
||||
wx.stopPullDownRefresh()
|
||||
},
|
||||
|
||||
refresh: function () {
|
||||
var stats = storage.getTotalStats()
|
||||
var monthKey = this.data.currentYear + '-' +
|
||||
(this.data.currentMonth < 10 ? '0' : '') + this.data.currentMonth
|
||||
var records = storage.getRecordsByMonth(monthKey)
|
||||
|
||||
var allRecords = []
|
||||
var all = storage.getRecords()
|
||||
Object.keys(all).forEach(function (key) {
|
||||
allRecords = allRecords.concat(all[key])
|
||||
})
|
||||
allRecords.sort(function (a, b) { return b.date.localeCompare(a.date) })
|
||||
|
||||
this.setData({
|
||||
totalDuration: stats.totalDuration,
|
||||
totalDurationText: util.formatDuration(stats.totalDuration),
|
||||
totalSessions: stats.totalSessions,
|
||||
maxDuration: stats.maxDuration,
|
||||
maxDurationText: util.formatDuration(stats.maxDuration),
|
||||
monthRecords: records,
|
||||
historyList: allRecords.slice(0, 30)
|
||||
})
|
||||
},
|
||||
|
||||
onPrevMonth: function () {
|
||||
var year = this.data.currentYear
|
||||
var month = this.data.currentMonth
|
||||
if (month === 1) {
|
||||
year--
|
||||
month = 12
|
||||
} else {
|
||||
month--
|
||||
}
|
||||
this.setData({ currentYear: year, currentMonth: month })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onNextMonth: function () {
|
||||
var year = this.data.currentYear
|
||||
var month = this.data.currentMonth
|
||||
if (month === 12) {
|
||||
year++
|
||||
month = 1
|
||||
} else {
|
||||
month++
|
||||
}
|
||||
this.setData({ currentYear: year, currentMonth: month })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onDayTap: function (e) {
|
||||
var detail = e.detail
|
||||
var dateStr = detail.year + '-' +
|
||||
(detail.month < 10 ? '0' : '') + detail.month + '-' +
|
||||
(detail.day < 10 ? '0' : '') + detail.day
|
||||
|
||||
var allRecords = []
|
||||
var all = storage.getRecords()
|
||||
Object.keys(all).forEach(function (key) {
|
||||
allRecords = allRecords.concat(all[key])
|
||||
})
|
||||
|
||||
var sessions = allRecords.filter(function (r) { return r.date === dateStr })
|
||||
var totalDur = 0
|
||||
sessions.forEach(function (r) { totalDur += r.duration })
|
||||
var calories = Math.round(totalDur * 0.068)
|
||||
|
||||
this.setData({
|
||||
showDayDetail: true,
|
||||
dayDetail: {
|
||||
date: dateStr,
|
||||
sessions: sessions.length,
|
||||
duration: totalDur,
|
||||
durationText: util.formatDuration(totalDur),
|
||||
calories: calories
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onCloseDayDetail: function () {
|
||||
this.setData({ showDayDetail: false })
|
||||
},
|
||||
|
||||
noop: function () {},
|
||||
|
||||
onDeleteRecord: function (e) {
|
||||
var id = e.currentTarget.dataset.id
|
||||
var self = this
|
||||
wx.showModal({
|
||||
title: '删除记录',
|
||||
content: '确定要删除这条训练记录吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
storage.deleteRecord(id)
|
||||
self.refresh()
|
||||
wx.showToast({ title: '已删除', icon: 'none', duration: 1200 })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"calendar-heatmap": "../../components/calendar-heatmap/calendar-heatmap"
|
||||
},
|
||||
"navigationBarTitleText": "训练记录"
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<view class="container" style="{{themeStyle}}">
|
||||
<!-- 统计卡片 -->
|
||||
<view class="stats card">
|
||||
<view class="stat-item">
|
||||
<text class="stat-emoji">📊</text>
|
||||
<text class="stat-num">{{totalSessions}}次</text>
|
||||
<text class="stat-label">训练次数</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-emoji">⏱</text>
|
||||
<text class="stat-num">{{totalDurationText}}</text>
|
||||
<text class="stat-label">累计时长</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-emoji">🏆</text>
|
||||
<text class="stat-num">{{maxDurationText}}</text>
|
||||
<text class="stat-label">最长记录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历热力图 -->
|
||||
<view class="calendar-section card">
|
||||
<view class="month-picker">
|
||||
<view class="month-arrow" bindtap="onPrevMonth">‹</view>
|
||||
<view class="month-title-wrap">
|
||||
<text class="month-emoji">🗓</text>
|
||||
<text class="month-title">{{currentYear}}年 {{currentMonth}}月</text>
|
||||
</view>
|
||||
<view class="month-arrow" bindtap="onNextMonth">›</view>
|
||||
</view>
|
||||
<calendar-heatmap
|
||||
year="{{currentYear}}"
|
||||
month="{{currentMonth}}"
|
||||
records="{{monthRecords}}"
|
||||
binddaytap="onDayTap"
|
||||
></calendar-heatmap>
|
||||
</view>
|
||||
|
||||
<!-- 历史记录 -->
|
||||
<view class="history-section card">
|
||||
<view class="history-header">
|
||||
<text class="section-title">📋 最近记录</text>
|
||||
</view>
|
||||
<view wx:if="{{historyList.length === 0}}" class="empty-state">
|
||||
<text class="empty-emoji">🏃</text>
|
||||
<text class="empty-text">还没有训练记录</text>
|
||||
<text class="empty-sub">开始你的第一次平板支撑吧</text>
|
||||
</view>
|
||||
<view class="history-list">
|
||||
<view class="history-item" wx:for="{{historyList}}" wx:key="id" data-id="{{item.id}}" bindlongpress="onDeleteRecord">
|
||||
<text class="history-icon">
|
||||
{{item.duration >= 120 ? '🔥' : item.duration >= 60 ? '💪' : '✅'}}
|
||||
</text>
|
||||
<view class="history-left">
|
||||
<text class="history-date">{{item.date}}</text>
|
||||
<text class="history-plan">第 {{item.day}} 天</text>
|
||||
</view>
|
||||
<view class="history-right">
|
||||
<text class="history-duration">{{item.duration}}s</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期详情弹窗 -->
|
||||
<view class="modal-overlay" wx:if="{{showDayDetail}}" bindtap="onCloseDayDetail">
|
||||
<view class="day-detail-modal" catchtap="noop">
|
||||
<view class="detail-date-row">
|
||||
<text class="detail-emoji">📅</text>
|
||||
<text class="detail-date">{{dayDetail.date}}</text>
|
||||
</view>
|
||||
<view class="detail-grid">
|
||||
<view class="detail-item">
|
||||
<text class="detail-num">{{dayDetail.sessions}}次</text>
|
||||
<text class="detail-label">训练次数</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-num">{{dayDetail.durationText}}</text>
|
||||
<text class="detail-label">总时长</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-num">{{dayDetail.calories}}</text>
|
||||
<text class="detail-label">约消耗 (千卡)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-close" bindtap="onCloseDayDetail">
|
||||
<text>关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,230 @@
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
padding: 32rpx 16rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-emoji {
|
||||
font-size: 28rpx;
|
||||
width: 56rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
animation: popIn 0.5s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- calendar ---- */
|
||||
.calendar-section {
|
||||
padding: 24rpx 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.month-picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.month-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.month-emoji {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.month-arrow {
|
||||
font-size: 44rpx;
|
||||
color: var(--primary);
|
||||
padding: 0 20rpx;
|
||||
font-weight: 300;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.month-arrow:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ---- history ---- */
|
||||
.history-header {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.empty-emoji {
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 16rpx;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #CCC;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 24rpx;
|
||||
color: #E0E0E0;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid var(--border);
|
||||
animation: cardIn 0.35s ease both;
|
||||
}
|
||||
|
||||
.history-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.history-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 28rpx;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.history-plan {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.history-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.history-duration {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ---- day detail popup ---- */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.day-detail-modal {
|
||||
width: 560rpx;
|
||||
background: #fff;
|
||||
border-radius: 28rpx;
|
||||
padding: 48rpx 40rpx 36rpx;
|
||||
animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-date-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.detail-emoji {
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.detail-date {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
padding: 16rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
border-top: 1rpx solid var(--border);
|
||||
}
|
||||
|
||||
.history-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
var storage = require('../../utils/storage')
|
||||
var themeMod = require('../../utils/theme')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
||||
themeStyle: '',
|
||||
themes: themeMod.THEMES,
|
||||
currentThemeId: 'orange',
|
||||
plans: [
|
||||
{ id: 'beginner', name: '初级', desc: '7天计划 · 30秒起步', days: 7 },
|
||||
{ id: 'intermediate', name: '中级', desc: '14天计划 · 60秒起步', days: 14 },
|
||||
{ id: 'advanced', name: '高级', desc: '30天计划 · 90秒起步', days: 30 }
|
||||
],
|
||||
currentPlanId: 'beginner',
|
||||
dailyReminder: true,
|
||||
reminderTime: '08:00',
|
||||
voiceGuide: true,
|
||||
vibrate: true
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
var s = storage.getSettings()
|
||||
var theme = themeMod.getCurrentTheme()
|
||||
themeMod.applyThemeToPage(this)
|
||||
this.setData({
|
||||
currentPlanId: s.planId,
|
||||
dailyReminder: s.dailyReminder,
|
||||
reminderTime: s.reminderTime,
|
||||
voiceGuide: s.voiceGuide,
|
||||
vibrate: s.vibrate,
|
||||
currentThemeId: theme.id
|
||||
})
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
try {
|
||||
var tb = this.getTabBar()
|
||||
if (tb) tb.setData({ selected: 2 })
|
||||
} catch (e) {}
|
||||
themeMod.applyThemeToPage(this)
|
||||
},
|
||||
|
||||
onSelectTheme: function (e) {
|
||||
var id = e.currentTarget.dataset.id
|
||||
var theme = themeMod.setTheme(id)
|
||||
this.setData({ currentThemeId: id })
|
||||
|
||||
try {
|
||||
var tb = this.getTabBar()
|
||||
if (tb) {
|
||||
tb.setData({ themeStyle: themeMod.getThemeStyle(theme) })
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
themeMod.applyThemeToPage(this)
|
||||
},
|
||||
|
||||
onSelectPlan: function (e) {
|
||||
var planId = e.currentTarget.dataset.id
|
||||
var s = storage.getSettings()
|
||||
s.planId = planId
|
||||
storage.saveSettings(s)
|
||||
this.setData({ currentPlanId: planId })
|
||||
wx.showToast({ title: '计划已切换', icon: 'success', duration: 1200 })
|
||||
},
|
||||
|
||||
onToggleReminder: function (e) {
|
||||
var s = storage.getSettings()
|
||||
s.dailyReminder = e.detail.value
|
||||
storage.saveSettings(s)
|
||||
this.setData({ dailyReminder: e.detail.value })
|
||||
},
|
||||
|
||||
onReminderTimeChange: function (e) {
|
||||
var s = storage.getSettings()
|
||||
s.reminderTime = e.detail.value
|
||||
storage.saveSettings(s)
|
||||
this.setData({ reminderTime: e.detail.value })
|
||||
},
|
||||
|
||||
onToggleVoice: function (e) {
|
||||
var s = storage.getSettings()
|
||||
s.voiceGuide = e.detail.value
|
||||
storage.saveSettings(s)
|
||||
this.setData({ voiceGuide: e.detail.value })
|
||||
},
|
||||
|
||||
onToggleVibrate: function (e) {
|
||||
var s = storage.getSettings()
|
||||
s.vibrate = e.detail.value
|
||||
storage.saveSettings(s)
|
||||
this.setData({ vibrate: e.detail.value })
|
||||
},
|
||||
|
||||
onCopyWechat: function () {
|
||||
wx.setClipboardData({
|
||||
data: '刘承',
|
||||
success: function () {
|
||||
wx.showToast({ title: '已复制', icon: 'success', duration: 1500 })
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "设置"
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<view class="container" style="{{themeStyle}}">
|
||||
<!-- 配色方案 -->
|
||||
<view class="card">
|
||||
<view class="section-header">
|
||||
<text class="section-emoji">🎨</text>
|
||||
<text class="section-title">配色方案</text>
|
||||
</view>
|
||||
<view class="theme-list">
|
||||
<view
|
||||
class="theme-item {{currentThemeId === item.id ? 'active' : ''}}"
|
||||
wx:for="{{themes}}"
|
||||
wx:key="id"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="onSelectTheme"
|
||||
>
|
||||
<view class="theme-color-dot" style="background: {{item.primary}};"></view>
|
||||
<text class="theme-name">{{item.name}}</text>
|
||||
<text class="plan-check" wx:if="{{currentThemeId === item.id}}">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 训练计划选择 -->
|
||||
<view class="card">
|
||||
<view class="section-header">
|
||||
<text class="section-emoji">📋</text>
|
||||
<text class="section-title">训练计划</text>
|
||||
</view>
|
||||
<view class="plan-list">
|
||||
<view
|
||||
class="plan-item {{currentPlanId === item.id ? 'active' : ''}}"
|
||||
wx:for="{{plans}}"
|
||||
wx:key="id"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="onSelectPlan"
|
||||
>
|
||||
<view class="plan-radio">
|
||||
<view class="radio-dot" wx:if="{{currentPlanId === item.id}}"></view>
|
||||
</view>
|
||||
<view class="plan-content">
|
||||
<text class="plan-item-name">{{item.name}}</text>
|
||||
<text class="plan-item-desc">{{item.desc}}</text>
|
||||
</view>
|
||||
<text class="plan-check" wx:if="{{currentPlanId === item.id}}">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提醒设置 -->
|
||||
<view class="card">
|
||||
<view class="section-header">
|
||||
<text class="section-emoji">🔔</text>
|
||||
<text class="section-title">提醒</text>
|
||||
</view>
|
||||
<view class="setting-row">
|
||||
<view class="setting-left">
|
||||
<text class="setting-icon">📅</text>
|
||||
<text class="setting-label">每日提醒</text>
|
||||
</view>
|
||||
<switch checked="{{dailyReminder}}" bindchange="onToggleReminder" color="{{theme.primary}}"/>
|
||||
</view>
|
||||
<view class="setting-row" wx:if="{{dailyReminder}}">
|
||||
<view class="setting-left">
|
||||
<text class="setting-icon">🕐</text>
|
||||
<text class="setting-label">提醒时间</text>
|
||||
</view>
|
||||
<picker mode="time" value="{{reminderTime}}" bindchange="onReminderTimeChange">
|
||||
<text class="setting-value">{{reminderTime}}</text>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 训练偏好 -->
|
||||
<view class="card">
|
||||
<view class="section-header">
|
||||
<text class="section-emoji">⚙</text>
|
||||
<text class="section-title">训练偏好</text>
|
||||
</view>
|
||||
<view class="setting-row">
|
||||
<view class="setting-left">
|
||||
<text class="setting-icon">🔊</text>
|
||||
<text class="setting-label">语音引导</text>
|
||||
</view>
|
||||
<switch checked="{{voiceGuide}}" bindchange="onToggleVoice" color="{{theme.primary}}"/>
|
||||
</view>
|
||||
<view class="setting-row">
|
||||
<view class="setting-left">
|
||||
<text class="setting-icon">📳</text>
|
||||
<text class="setting-label">振动反馈</text>
|
||||
</view>
|
||||
<switch checked="{{vibrate}}" bindchange="onToggleVibrate" color="{{theme.primary}}"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关于 -->
|
||||
<view class="card about-card">
|
||||
<view class="section-header">
|
||||
<text class="section-emoji">ℹ</text>
|
||||
<text class="section-title">关于</text>
|
||||
</view>
|
||||
<view class="about-list">
|
||||
<view class="about-row">
|
||||
<text class="about-label">版本</text>
|
||||
<text class="about-value">v1.0.0</text>
|
||||
</view>
|
||||
<view class="about-row" bindtap="onCopyWechat">
|
||||
<text class="about-label">开发者</text>
|
||||
<text class="about-value about-link">刘承</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="about-footer">
|
||||
<text class="about-copy">Made with ❤️ for better fitness</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,220 @@
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-emoji {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---- 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 {
|
||||
color: var(--primary);
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---- 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 {
|
||||
font-size: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 28rpx;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
font-size: 28rpx;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ---- about ---- */
|
||||
.about-card {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
var Timer = require('../../utils/timer')
|
||||
var storage = require('../../utils/storage')
|
||||
var planMod = require('../../utils/plan')
|
||||
var themeMod = require('../../utils/theme')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
||||
themeStyle: '',
|
||||
duration: 60,
|
||||
remaining: 60,
|
||||
status: 'idle',
|
||||
isRunning: false,
|
||||
isPaused: false,
|
||||
isCompleted: false,
|
||||
overtime: 0,
|
||||
todayTarget: 0,
|
||||
planDay: 1,
|
||||
isFreeMode: false
|
||||
},
|
||||
|
||||
onLoad: function (options) {
|
||||
themeMod.applyThemeToPage(this)
|
||||
|
||||
var target
|
||||
var planDay = 1
|
||||
var isFreeMode = false
|
||||
|
||||
if (options && options.free) {
|
||||
target = parseInt(options.free) || 60
|
||||
isFreeMode = true
|
||||
} else {
|
||||
var settings = storage.getSettings()
|
||||
var records = []
|
||||
var allRecords = storage.getRecords()
|
||||
Object.keys(allRecords).forEach(function (key) {
|
||||
records = records.concat(allRecords[key])
|
||||
})
|
||||
|
||||
var plan = planMod.getPlan(settings.planId)
|
||||
planDay = planMod.getPlanDay(settings.planId, records)
|
||||
target = planMod.getTodayTarget(settings.planId, Math.min(planDay, plan.totalDays))
|
||||
}
|
||||
|
||||
this.setData({
|
||||
duration: target,
|
||||
remaining: target,
|
||||
todayTarget: target,
|
||||
planDay: isFreeMode ? 0 : Math.min(planDay, 99),
|
||||
isFreeMode: isFreeMode
|
||||
})
|
||||
|
||||
var self = this
|
||||
this._timer = new Timer({
|
||||
onTick: function (tick) {
|
||||
self.setData({
|
||||
remaining: tick.remaining > 0 ? tick.remaining : 0,
|
||||
overtime: tick.remaining <= 0 ? tick.elapsed - self.data.duration : 0
|
||||
})
|
||||
},
|
||||
onComplete: function () {
|
||||
self.setData({ status: 'completed', isCompleted: true })
|
||||
if (storage.getSettings().vibrate) {
|
||||
try { wx.vibrateLong() } catch (e) {}
|
||||
}
|
||||
wx.showToast({ title: '目标完成! 太棒了!', icon: 'success', duration: 2000 })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onUnload: function () {
|
||||
if (this._timer) this._timer.stop()
|
||||
},
|
||||
|
||||
onStart: function () {
|
||||
if (this.data.isPaused) {
|
||||
this._timer.resume()
|
||||
this.setData({ isRunning: true, isPaused: false, status: 'running' })
|
||||
return
|
||||
}
|
||||
if (this.data.isRunning) return
|
||||
this._timer.start(this.data.duration)
|
||||
this.setData({ isRunning: true, status: 'running' })
|
||||
},
|
||||
|
||||
onPause: function () {
|
||||
if (!this.data.isRunning || this.data.isPaused) return
|
||||
this._timer.pause()
|
||||
this.setData({ isPaused: true, status: 'paused' })
|
||||
},
|
||||
|
||||
onStop: function () {
|
||||
var self = this
|
||||
wx.showModal({
|
||||
title: '结束训练',
|
||||
content: '确定要结束本次训练吗?',
|
||||
success: function (res) {
|
||||
if (res.confirm) self.finishTraining()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
finishTraining: function () {
|
||||
var elapsed = this._timer.stop()
|
||||
var today = storage.getToday()
|
||||
storage.saveRecord({
|
||||
date: today,
|
||||
duration: elapsed,
|
||||
planId: storage.getSettings().planId,
|
||||
day: this.data.planDay
|
||||
})
|
||||
storage.updateStreak(today)
|
||||
|
||||
wx.showToast({ title: '已记录 ' + elapsed + '秒', icon: 'none', duration: 1500 })
|
||||
setTimeout(function () { wx.navigateBack() }, 1500)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"progress-ring": "../../components/progress-ring/progress-ring"
|
||||
},
|
||||
"navigationBarTitleText": "训练中"
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<view class="container timer-page" style="{{themeStyle}}">
|
||||
|
||||
<!-- 呼吸引导环 + 进度条 -->
|
||||
<view class="ring-wrapper">
|
||||
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
|
||||
wx:if="{{status !== 'completed'}}"></view>
|
||||
<view class="breathe-ring breathe-ring-2 {{status === 'running' ? 'fast' : ''}}"
|
||||
wx:if="{{status !== 'completed'}}"></view>
|
||||
<view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
|
||||
wx:if="{{status !== 'completed'}}"></view>
|
||||
|
||||
<progress-ring
|
||||
duration="{{duration}}"
|
||||
remaining="{{isCompleted ? 0 : remaining}}"
|
||||
size="{{360}}"
|
||||
ringWidth="{{16}}"
|
||||
status="{{status}}"
|
||||
primaryColor="{{theme.primary}}"
|
||||
primaryLightColor="{{theme.primaryLight}}"
|
||||
></progress-ring>
|
||||
|
||||
<!-- 完成庆祝粒子 -->
|
||||
<view class="celebrate-burst" wx:if="{{isCompleted}}">
|
||||
<view class="spark s1">✨</view>
|
||||
<view class="spark s2">⭐</view>
|
||||
<view class="spark s3">💫</view>
|
||||
<view class="spark s4">🌟</view>
|
||||
<view class="spark s5">✨</view>
|
||||
<view class="spark s6">💪</view>
|
||||
</view>
|
||||
|
||||
<view class="overtime-badge" wx:if="{{isCompleted && overtime > 0}}">
|
||||
<text class="overtime-icon">🔥</text>
|
||||
<text>+{{overtime}}s</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示 -->
|
||||
<view class="hint-section">
|
||||
<view class="hint-row" wx:if="{{status === 'idle'}}">
|
||||
<text class="hint-emoji">🧘</text>
|
||||
<text class="hint-text">
|
||||
<block wx:if="{{isFreeMode}}">自由训练 · 目标 {{duration}} 秒</block>
|
||||
<block wx:else>今日目标 {{duration}} 秒 · 第 {{planDay}} 天</block>
|
||||
</text>
|
||||
</view>
|
||||
<view class="hint-row" wx:elif="{{status === 'running'}}">
|
||||
<text class="hint-emoji running-pulse">💪</text>
|
||||
<text class="hint-text running">保持姿势，核心收紧!</text>
|
||||
</view>
|
||||
<view class="hint-row" wx:elif="{{status === 'paused'}}">
|
||||
<text class="hint-emoji">⏸</text>
|
||||
<text class="hint-text paused">已暂停</text>
|
||||
</view>
|
||||
<view class="hint-row completed-hint" wx:elif="{{status === 'completed'}}">
|
||||
<text class="hint-emoji completed-bounce">🎉</text>
|
||||
<text class="hint-text completed">目标完成! 继续坚持!</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<view class="controls">
|
||||
<button
|
||||
wx:if="{{!isRunning && !isPaused}}"
|
||||
class="ctrl-btn start-btn"
|
||||
bindtap="onStart"
|
||||
>
|
||||
<text class="ctrl-icon">▶</text>
|
||||
<text>开始</text>
|
||||
</button>
|
||||
|
||||
<view class="ctrl-row" wx:if="{{isRunning || isPaused}}">
|
||||
<button
|
||||
wx:if="{{!isPaused}}"
|
||||
class="ctrl-btn pause-btn"
|
||||
bindtap="onPause"
|
||||
>
|
||||
<text class="ctrl-icon">⏸</text>
|
||||
<text>暂停</text>
|
||||
</button>
|
||||
<button
|
||||
wx:if="{{isPaused}}"
|
||||
class="ctrl-btn resume-btn"
|
||||
bindtap="onStart"
|
||||
>
|
||||
<text class="ctrl-icon">▶</text>
|
||||
<text>继续</text>
|
||||
</button>
|
||||
<button class="ctrl-btn stop-btn" bindtap="onStop">
|
||||
<text class="ctrl-icon">⏹</text>
|
||||
<text>结束</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,245 @@
|
||||
.timer-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---- ring wrapper ---- */
|
||||
.ring-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* breathing guide rings — three concentric layers */
|
||||
.breathe-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid rgba(var(--primary-rgb), 0.15);
|
||||
animation: breathePulse 3.5s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.breathe-ring-1 {
|
||||
width: 480rpx;
|
||||
height: 480rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.breathe-ring-2 {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
animation-delay: 0.5s;
|
||||
border-color: rgba(var(--primary-rgb), 0.25);
|
||||
border-width: 4rpx;
|
||||
}
|
||||
|
||||
.breathe-ring-3 {
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
animation-delay: 1s;
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
border-width: 5rpx;
|
||||
}
|
||||
|
||||
.breathe-ring.fast {
|
||||
animation: breathePulseFast 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.breathe-ring.fast.breathe-ring-1 {
|
||||
animation-delay: 0s;
|
||||
border-color: rgba(var(--primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.breathe-ring.fast.breathe-ring-2 {
|
||||
animation-delay: 0.25s;
|
||||
border-color: rgba(var(--primary-rgb), 0.45);
|
||||
}
|
||||
|
||||
.breathe-ring.fast.breathe-ring-3 {
|
||||
animation-delay: 0.5s;
|
||||
border-color: rgba(var(--primary-rgb), 0.6);
|
||||
}
|
||||
|
||||
/* celebration burst */
|
||||
.celebrate-burst {
|
||||
position: absolute;
|
||||
width: 520rpx;
|
||||
height: 520rpx;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.spark {
|
||||
position: absolute;
|
||||
font-size: 36rpx;
|
||||
animation: sparkBurst 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.s1 { top: -10rpx; left: 50%; margin-left: -18rpx; animation-delay: 0s; }
|
||||
.s2 { top: 30rpx; right: -10rpx; animation-delay: 0.1s; }
|
||||
.s3 { bottom: -10rpx; right: 50rpx; animation-delay: 0.2s; }
|
||||
.s4 { bottom: 20rpx; left: 30rpx; animation-delay: 0.15s; }
|
||||
.s5 { top: 50%; right: -20rpx; animation-delay: 0.25s; }
|
||||
.s6 { top: -20rpx; left: 40rpx; animation-delay: 0.05s; }
|
||||
|
||||
@keyframes sparkBurst {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: translate(0, -30rpx) scale(1.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(0, -80rpx) scale(0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* overtime badge */
|
||||
.overtime-badge {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(76, 175, 80, 0.12);
|
||||
border: 2rpx solid rgba(76, 175, 80, 0.3);
|
||||
color: var(--success);
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.overtime-icon {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---- hint section ---- */
|
||||
.hint-section {
|
||||
margin-top: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.hint-emoji {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.running-pulse {
|
||||
animation: float 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.completed-bounce {
|
||||
animation: bounceSoft 0.6s ease infinite;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hint-text.running {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hint-text.paused {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.hint-text.completed {
|
||||
color: var(--success);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.completed-hint {
|
||||
animation: popIn 0.5s ease;
|
||||
}
|
||||
|
||||
/* ---- controls ---- */
|
||||
.controls {
|
||||
margin-top: 60rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ctrl-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
width: 300rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 54rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ctrl-btn:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.ctrl-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ctrl-icon {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 28rpx rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
|
||||
.pause-btn {
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary);
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
|
||||
.resume-btn {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #fff;
|
||||
margin-right: 28rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
background: #F5F5F5;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctrl-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"description": "平板支撑训练小程序",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"bundle": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"urlCheck": true,
|
||||
"scopeDataCheck": false,
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"compileHotReLoad": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"minified": true,
|
||||
"autoAudits": false,
|
||||
"newFeature": false,
|
||||
"uglifyFileName": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"useIsolateContext": true,
|
||||
"nodeModules": false,
|
||||
"enhance": true,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmManually": false,
|
||||
"enableEngineNative": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true,
|
||||
"showES6CompileOption": false,
|
||||
"minifyWXML": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"condition": false,
|
||||
"compileWorklet": false,
|
||||
"localPlugins": false,
|
||||
"disableUseStrict": false,
|
||||
"useCompilerPlugins": false,
|
||||
"swc": false,
|
||||
"disableSWC": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "3.3.4",
|
||||
"appid": "wxb7f1bc86924869bc",
|
||||
"projectname": "pbzc",
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
},
|
||||
"simulatorPluginLibVersion": {}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"libVersion": "3.16.0",
|
||||
"projectname": "wx_pbzc",
|
||||
"condition": {},
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"useApiHook": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"useStaticServer": false,
|
||||
"useLanDebug": false,
|
||||
"showES6CompileOption": false,
|
||||
"compileHotReLoad": true,
|
||||
"checkInvalidKey": true,
|
||||
"ignoreDevUnusedFiles": true,
|
||||
"bigPackageSizeSupport": false,
|
||||
"useIsolateContext": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"rules": [
|
||||
{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,73 @@
|
||||
var plans = {
|
||||
beginner: {
|
||||
id: 'beginner',
|
||||
name: '初级 (7天)',
|
||||
totalDays: 7,
|
||||
description: '适合初学者，从30秒起步',
|
||||
days: [
|
||||
{ day: 1, target: 30 },
|
||||
{ day: 2, target: 40 },
|
||||
{ day: 3, target: 50 },
|
||||
{ day: 4, target: 60 },
|
||||
{ day: 5, target: 70 },
|
||||
{ day: 6, target: 80 },
|
||||
{ day: 7, target: 90 }
|
||||
]
|
||||
},
|
||||
intermediate: {
|
||||
id: 'intermediate',
|
||||
name: '中级 (14天)',
|
||||
totalDays: 14,
|
||||
description: '有一定基础，从60秒起步',
|
||||
days: [
|
||||
{ day: 1, target: 60 }, { day: 2, target: 60 },
|
||||
{ day: 3, target: 75 }, { day: 4, target: 75 },
|
||||
{ day: 5, target: 90 }, { day: 6, target: 90 },
|
||||
{ day: 7, target: 105 }, { day: 8, target: 105 },
|
||||
{ day: 9, target: 120 }, { day: 10, target: 120 },
|
||||
{ day: 11, target: 135 }, { day: 12, target: 135 },
|
||||
{ day: 13, target: 150 }, { day: 14, target: 150 }
|
||||
]
|
||||
},
|
||||
advanced: {
|
||||
id: 'advanced',
|
||||
name: '高级 (30天)',
|
||||
totalDays: 30,
|
||||
description: '挑战自我，从90秒起步',
|
||||
days: (function () {
|
||||
var arr = []
|
||||
for (var i = 1; i <= 30; i++) {
|
||||
arr.push({ day: i, target: 90 + Math.floor((i - 1) / 3) * 15 })
|
||||
}
|
||||
return arr
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
||||
function getPlan(planId) {
|
||||
return plans[planId] || plans.beginner
|
||||
}
|
||||
|
||||
function getTodayTarget(planId, currentDay) {
|
||||
var plan = getPlan(planId)
|
||||
for (var i = 0; i < plan.days.length; i++) {
|
||||
if (plan.days[i].day === currentDay) return plan.days[i].target
|
||||
}
|
||||
return plan.days[0].target
|
||||
}
|
||||
|
||||
function getPlanDay(planId, records) {
|
||||
var plan = getPlan(planId)
|
||||
var now = new Date()
|
||||
var today = now.getFullYear() + '-' +
|
||||
('0' + (now.getMonth() + 1)).slice(-2) + '-' +
|
||||
('0' + now.getDate()).slice(-2)
|
||||
var dates = {}
|
||||
records.forEach(function (r) {
|
||||
if (r.date !== today) dates[r.date] = true
|
||||
})
|
||||
var trainedDays = Object.keys(dates).length
|
||||
return Math.min(trainedDays + 1, plan.totalDays)
|
||||
}
|
||||
|
||||
module.exports = { plans: plans, getPlan: getPlan, getTodayTarget: getTodayTarget, getPlanDay: getPlanDay }
|
||||
@@ -0,0 +1,132 @@
|
||||
var RECORDS_KEY = 'training_records'
|
||||
var SETTINGS_KEY = 'user_settings'
|
||||
var STREAK_KEY = 'current_streak'
|
||||
|
||||
function getRecords() {
|
||||
return wx.getStorageSync(RECORDS_KEY) || {}
|
||||
}
|
||||
|
||||
function saveRecord(record) {
|
||||
record.id = Date.now()
|
||||
var records = getRecords()
|
||||
var month = record.date.substring(0, 7)
|
||||
if (!records[month]) records[month] = []
|
||||
records[month].push(record)
|
||||
records[month].sort(function (a, b) { return b.date.localeCompare(a.date) })
|
||||
wx.setStorageSync(RECORDS_KEY, records)
|
||||
}
|
||||
|
||||
function deleteRecord(recordId) {
|
||||
var records = getRecords()
|
||||
Object.keys(records).forEach(function (month) {
|
||||
records[month] = records[month].filter(function (r) { return r.id !== recordId })
|
||||
if (records[month].length === 0) delete records[month]
|
||||
})
|
||||
wx.setStorageSync(RECORDS_KEY, records)
|
||||
}
|
||||
|
||||
function getRecordsByMonth(month) {
|
||||
var records = getRecords()
|
||||
return records[month] || []
|
||||
}
|
||||
|
||||
function getTotalStats() {
|
||||
var records = getRecords()
|
||||
var totalDuration = 0
|
||||
var totalSessions = 0
|
||||
var maxDuration = 0
|
||||
Object.keys(records).forEach(function (key) {
|
||||
var list = records[key]
|
||||
list.forEach(function (r) {
|
||||
totalDuration += r.duration
|
||||
totalSessions++
|
||||
if (r.duration > maxDuration) maxDuration = r.duration
|
||||
})
|
||||
})
|
||||
return { totalDuration: totalDuration, totalSessions: totalSessions, maxDuration: maxDuration }
|
||||
}
|
||||
|
||||
function getSettings() {
|
||||
return wx.getStorageSync(SETTINGS_KEY) || {
|
||||
planId: 'beginner',
|
||||
dailyReminder: true,
|
||||
reminderTime: '08:00',
|
||||
voiceGuide: true,
|
||||
vibrate: true
|
||||
}
|
||||
}
|
||||
|
||||
function saveSettings(settings) {
|
||||
wx.setStorageSync(SETTINGS_KEY, settings)
|
||||
}
|
||||
|
||||
function getStreak() {
|
||||
return wx.getStorageSync(STREAK_KEY) || { count: 0, lastDate: '' }
|
||||
}
|
||||
|
||||
function updateStreak(date) {
|
||||
var streak = getStreak()
|
||||
var today = date || getToday()
|
||||
var yesterday = getDateOffset(today, -1)
|
||||
|
||||
if (streak.lastDate === today) return streak
|
||||
|
||||
if (streak.lastDate === yesterday) {
|
||||
streak.count += 1
|
||||
} else {
|
||||
streak.count = 1
|
||||
}
|
||||
streak.lastDate = today
|
||||
wx.setStorageSync(STREAK_KEY, streak)
|
||||
return streak
|
||||
}
|
||||
|
||||
function getToday() {
|
||||
return formatDate(new Date())
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
var y = date.getFullYear()
|
||||
var m = String(date.getMonth() + 1)
|
||||
if (m.length < 2) m = '0' + m
|
||||
var d = String(date.getDate())
|
||||
if (d.length < 2) d = '0' + d
|
||||
return y + '-' + m + '-' + d
|
||||
}
|
||||
|
||||
function getDateOffset(dateStr, offset) {
|
||||
var d = new Date(dateStr)
|
||||
d.setDate(d.getDate() + offset)
|
||||
return formatDate(d)
|
||||
}
|
||||
|
||||
function getTodayRecord() {
|
||||
var today = getToday()
|
||||
var month = today.substring(0, 7)
|
||||
var records = getRecordsByMonth(month)
|
||||
var totalDuration = 0
|
||||
var hasRecord = false
|
||||
for (var i = 0; i < records.length; i++) {
|
||||
if (records[i].date === today) {
|
||||
totalDuration += records[i].duration
|
||||
hasRecord = true
|
||||
}
|
||||
}
|
||||
return hasRecord ? { date: today, duration: totalDuration } : null
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getRecords: getRecords,
|
||||
saveRecord: saveRecord,
|
||||
deleteRecord: deleteRecord,
|
||||
getRecordsByMonth: getRecordsByMonth,
|
||||
getTotalStats: getTotalStats,
|
||||
getSettings: getSettings,
|
||||
saveSettings: saveSettings,
|
||||
getStreak: getStreak,
|
||||
updateStreak: updateStreak,
|
||||
getToday: getToday,
|
||||
formatDate: formatDate,
|
||||
getDateOffset: getDateOffset,
|
||||
getTodayRecord: getTodayRecord
|
||||
}
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
var THEMES = [
|
||||
{
|
||||
id: 'orange',
|
||||
name: '活力橙',
|
||||
primary: '#FF6B35',
|
||||
primaryLight: '#FF8C5A',
|
||||
primaryBg: '#FFF3ED',
|
||||
primaryRgb: '255,107,53'
|
||||
},
|
||||
{
|
||||
id: 'blue',
|
||||
name: '深海蓝',
|
||||
primary: '#2979FF',
|
||||
primaryLight: '#5C9CFF',
|
||||
primaryBg: '#EDF4FF',
|
||||
primaryRgb: '41,121,255'
|
||||
},
|
||||
{
|
||||
id: 'green',
|
||||
name: '森林绿',
|
||||
primary: '#43A047',
|
||||
primaryLight: '#6EC072',
|
||||
primaryBg: '#EDF7EE',
|
||||
primaryRgb: '67,160,71'
|
||||
},
|
||||
{
|
||||
id: 'purple',
|
||||
name: '优雅紫',
|
||||
primary: '#7E57C2',
|
||||
primaryLight: '#A08AD6',
|
||||
primaryBg: '#F5F0FA',
|
||||
primaryRgb: '126,87,194'
|
||||
},
|
||||
{
|
||||
id: 'pink',
|
||||
name: '樱花粉',
|
||||
primary: '#EC407A',
|
||||
primaryLight: '#F06A9A',
|
||||
primaryBg: '#FDEEF3',
|
||||
primaryRgb: '236,64,122'
|
||||
}
|
||||
]
|
||||
|
||||
var DEFAULT_THEME_ID = 'orange'
|
||||
var THEME_KEY = 'app_theme'
|
||||
var _lastNavColor = ''
|
||||
var _navColorTimer = null
|
||||
|
||||
function getThemeById(id) {
|
||||
return THEMES.find(function (t) { return t.id === id }) || THEMES[0]
|
||||
}
|
||||
|
||||
function getCurrentTheme() {
|
||||
var id = wx.getStorageSync(THEME_KEY) || DEFAULT_THEME_ID
|
||||
return getThemeById(id)
|
||||
}
|
||||
|
||||
function _setNavBarColor(primary) {
|
||||
if (_lastNavColor === primary) return
|
||||
_lastNavColor = primary
|
||||
if (_navColorTimer) clearTimeout(_navColorTimer)
|
||||
_navColorTimer = setTimeout(function () {
|
||||
try {
|
||||
wx.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: primary
|
||||
})
|
||||
} catch (e) {}
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function setTheme(id) {
|
||||
wx.setStorageSync(THEME_KEY, id)
|
||||
var theme = getThemeById(id)
|
||||
_setNavBarColor(theme.primary)
|
||||
var app = getApp()
|
||||
if (app && app.globalData) app.globalData.theme = theme
|
||||
return theme
|
||||
}
|
||||
|
||||
function applyThemeToPage(self) {
|
||||
var theme = getCurrentTheme()
|
||||
self.setData({
|
||||
theme: theme,
|
||||
themeStyle: '--primary:' + theme.primary + ';--primary-light:' + theme.primaryLight + ';--primary-bg:' + theme.primaryBg + ';--primary-rgb:' + theme.primaryRgb + ';'
|
||||
})
|
||||
_setNavBarColor(theme.primary)
|
||||
}
|
||||
|
||||
function getThemeStyle(theme) {
|
||||
var t = theme || getCurrentTheme()
|
||||
return '--primary:' + t.primary + ';--primary-light:' + t.primaryLight + ';--primary-bg:' + t.primaryBg + ';--primary-rgb:' + t.primaryRgb + ';'
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
THEMES: THEMES,
|
||||
DEFAULT_THEME_ID: DEFAULT_THEME_ID,
|
||||
getThemeById: getThemeById,
|
||||
getCurrentTheme: getCurrentTheme,
|
||||
setTheme: setTheme,
|
||||
applyThemeToPage: applyThemeToPage,
|
||||
getThemeStyle: getThemeStyle
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
function Timer(options) {
|
||||
options = options || {}
|
||||
this.onTick = options.onTick || function () {}
|
||||
this.onComplete = options.onComplete || function () {}
|
||||
|
||||
this._duration = 0
|
||||
this._remaining = 0
|
||||
this._elapsed = 0
|
||||
this._startTime = 0
|
||||
this._pausedTime = 0
|
||||
this._intervalId = null
|
||||
this._running = false
|
||||
this._paused = false
|
||||
this._completed = false
|
||||
}
|
||||
|
||||
Timer.prototype.start = function (duration) {
|
||||
this._duration = duration
|
||||
this._remaining = duration
|
||||
this._elapsed = 0
|
||||
this._completed = false
|
||||
this._running = true
|
||||
this._paused = false
|
||||
this._startTime = Date.now()
|
||||
this._tick()
|
||||
var self = this
|
||||
this._intervalId = setInterval(function () { self._tick() }, 1000)
|
||||
}
|
||||
|
||||
Timer.prototype.pause = function () {
|
||||
if (!this._running || this._paused) return
|
||||
this._paused = true
|
||||
this._pausedTime = Date.now()
|
||||
clearInterval(this._intervalId)
|
||||
this._intervalId = null
|
||||
}
|
||||
|
||||
Timer.prototype.resume = function () {
|
||||
if (!this._running || !this._paused) return
|
||||
this._startTime += Date.now() - this._pausedTime
|
||||
this._paused = false
|
||||
this._tick()
|
||||
var self = this
|
||||
this._intervalId = setInterval(function () { self._tick() }, 1000)
|
||||
}
|
||||
|
||||
Timer.prototype.stop = function () {
|
||||
this._running = false
|
||||
this._paused = false
|
||||
clearInterval(this._intervalId)
|
||||
this._intervalId = null
|
||||
return this._elapsed
|
||||
}
|
||||
|
||||
Timer.prototype._tick = function () {
|
||||
if (!this._running || this._paused) return
|
||||
this._elapsed = Math.floor((Date.now() - this._startTime) / 1000)
|
||||
this._remaining = Math.max(0, this._duration - this._elapsed)
|
||||
|
||||
this.onTick({
|
||||
remaining: this._remaining,
|
||||
elapsed: this._elapsed,
|
||||
duration: this._duration
|
||||
})
|
||||
|
||||
if (this._remaining <= 0 && !this._completed) {
|
||||
this._completed = true
|
||||
this.onComplete({ elapsed: this._elapsed, duration: this._duration })
|
||||
}
|
||||
}
|
||||
|
||||
Object.defineProperty(Timer.prototype, 'isRunning', {
|
||||
get: function () { return this._running && !this._paused }
|
||||
})
|
||||
|
||||
Object.defineProperty(Timer.prototype, 'isPaused', {
|
||||
get: function () { return this._paused }
|
||||
})
|
||||
|
||||
Object.defineProperty(Timer.prototype, 'isCompleted', {
|
||||
get: function () { return this._completed }
|
||||
})
|
||||
|
||||
Object.defineProperty(Timer.prototype, 'remaining', {
|
||||
get: function () { return this._remaining }
|
||||
})
|
||||
|
||||
Object.defineProperty(Timer.prototype, 'elapsed', {
|
||||
get: function () { return this._elapsed }
|
||||
})
|
||||
|
||||
module.exports = Timer
|
||||
@@ -0,0 +1,44 @@
|
||||
function formatTime(seconds) {
|
||||
var m = Math.floor(seconds / 60)
|
||||
var s = seconds % 60
|
||||
return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (seconds < 60) return seconds + '秒'
|
||||
var m = Math.floor(seconds / 60)
|
||||
var s = seconds % 60
|
||||
return s > 0 ? m + '分' + s + '秒' : m + '分钟'
|
||||
}
|
||||
|
||||
function getDaysInMonth(year, month) {
|
||||
return new Date(year, month, 0).getDate()
|
||||
}
|
||||
|
||||
function getMonthCalendar(year, month) {
|
||||
var firstDay = new Date(year, month - 1, 1)
|
||||
var lastDay = new Date(year, month, 0)
|
||||
var daysInMonth = lastDay.getDate()
|
||||
var startDayOfWeek = firstDay.getDay()
|
||||
|
||||
var weeks = []
|
||||
var week = [null, null, null, null, null, null, null]
|
||||
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var dow = (startDayOfWeek + d - 1) % 7
|
||||
week[dow] = d
|
||||
if (dow === 6 || d === daysInMonth) {
|
||||
weeks.push(week.slice())
|
||||
week = [null, null, null, null, null, null, null]
|
||||
}
|
||||
}
|
||||
|
||||
return weeks
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime: formatTime,
|
||||
formatDuration: formatDuration,
|
||||
getDaysInMonth: getDaysInMonth,
|
||||
getMonthCalendar: getMonthCalendar
|
||||
}
|
||||
Reference in New Issue
Block a user