872 lines
22 KiB
Vue
872 lines
22 KiB
Vue
<template>
|
||
<view class="control-page">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="custom-navbar">
|
||
<view class="navbar-content">
|
||
<view class="nav-left" @click="goBack">
|
||
<uni-icons type="back" color="#fff" size="20"></uni-icons>
|
||
</view>
|
||
<view class="nav-center">
|
||
<text class="nav-title">{{ deviceName || 'Six-Channel Mixer' }}</text>
|
||
</view>
|
||
<view class="nav-right">
|
||
<view class="bluetooth-status">
|
||
<uni-icons type="bluetooth-filled" color="#fff" size="20"></uni-icons>
|
||
<text class="status-text">{{ connected ? 'Connected' : 'Disconnected' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="control-container">
|
||
<!-- 无使能通道提示 -->
|
||
<view v-if="enabledChannels.length === 0" class="empty-tip">
|
||
<uni-icons type="info" color="#94a3b8" size="48"></uni-icons>
|
||
<text class="empty-text">No enabled channels</text>
|
||
<text class="empty-hint">Please enable channels in Setting page first</text>
|
||
</view>
|
||
|
||
<!-- 通道状态列表 -->
|
||
<scroll-view v-else class="channel-scroll" scroll-y>
|
||
<view class="channel-list">
|
||
<view
|
||
v-for="channel in enabledChannels"
|
||
:key="channel.id"
|
||
class="channel-card"
|
||
>
|
||
<view class="card-header">
|
||
<text class="channel-title">{{ channel.name }}</text>
|
||
<view :class="['status-badge', getStatusClass(channel.runStatus)]">
|
||
<text>{{ getStatusText(channel.runStatus) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="status-info">
|
||
<!-- 三个模式状态显示 -->
|
||
<view class="mode-status-row">
|
||
<view :class="['mode-item', { active: channel.currentMode === 1, done: channel.currentMode > 1 }]">
|
||
<text class="mode-icon">⚡</text>
|
||
<text class="mode-name">Fast</text>
|
||
<text v-if="channel.currentMode > 1" class="done-mark">✓</text>
|
||
</view>
|
||
<view :class="['mode-item', { active: channel.currentMode === 2, done: channel.currentMode > 2 }]">
|
||
<text class="mode-icon">🔄</text>
|
||
<text class="mode-name">Slow</text>
|
||
<text v-if="channel.currentMode > 2" class="done-mark">✓</text>
|
||
</view>
|
||
<view :class="['mode-item', { active: channel.currentMode === 3, done: channel.runStatus === 3 && channel.currentMode === 3 }]">
|
||
<text class="mode-icon">⏸</text>
|
||
<text class="mode-name">Still</text>
|
||
<text v-if="channel.runStatus === 3" class="done-mark">✓</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">Remaining</text>
|
||
<text class="info-value time">{{ formatTime(channel.remainingTime) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度条 -->
|
||
<view class="progress-bar">
|
||
<view
|
||
class="progress-fill"
|
||
:style="{ width: getProgressPercent(channel) + '%' }"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 控制按钮区域 -->
|
||
<view v-if="enabledChannels.length > 0" class="control-buttons">
|
||
<view class="button-row">
|
||
<view
|
||
:class="['ctrl-btn', 'start', { disabled: !canStart }]"
|
||
@click="handleStart"
|
||
>
|
||
<uni-icons type="circle-filled" color="#fff" size="24"></uni-icons>
|
||
<text>Start</text>
|
||
</view>
|
||
<view
|
||
:class="['ctrl-btn', 'pause', { disabled: !canPause }]"
|
||
@click="handlePause"
|
||
>
|
||
<uni-icons type="minus-filled" color="#fff" size="24"></uni-icons>
|
||
<text>Pause</text>
|
||
</view>
|
||
</view>
|
||
<view class="button-row">
|
||
<view
|
||
:class="['ctrl-btn', 'resume', { disabled: !canResume }]"
|
||
@click="handleResume"
|
||
>
|
||
<uni-icons type="forward" color="#fff" size="24"></uni-icons>
|
||
<text>Resume</text>
|
||
</view>
|
||
<view
|
||
:class="['ctrl-btn', 'stop', { disabled: !canStop }]"
|
||
@click="handleStop"
|
||
>
|
||
<uni-icons type="close" color="#fff" size="24"></uni-icons>
|
||
<text>Exit</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部Tab导航 -->
|
||
<view class="bottom-tabs">
|
||
<view class="tab-item" @click="goToSetting">
|
||
<uni-icons type="gear-filled" color="#666" size="24"></uni-icons>
|
||
<text class="tab-text">Setting</text>
|
||
</view>
|
||
<view class="tab-item active">
|
||
<uni-icons type="right" color="#667eea" size="24"></uni-icons>
|
||
<text class="tab-text active">Start</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
// 本地存储 key
|
||
const STORAGE_KEY = 'mixer_settings'
|
||
|
||
// 蓝牙连接信息
|
||
const connected = ref(false)
|
||
const deviceId = ref('')
|
||
const deviceName = ref('')
|
||
const serviceId = ref('')
|
||
|
||
// 新协议1.2特征值UUID（从设置页面传递）
|
||
const settingCharId = ref('') // 0xFF01 设置参数
|
||
const statusCharId = ref('') // 0xFF02 运行状态
|
||
const controlCharId = ref('') // 0xFF03 控制指令
|
||
|
||
// 定时器
|
||
let statusTimer = null
|
||
|
||
// 通道数据（从设置页面加载）
|
||
const channels = ref([])
|
||
|
||
// 已使能的通道
|
||
const enabledChannels = computed(() => {
|
||
return channels.value.filter(c => c.enabled)
|
||
})
|
||
|
||
// 按钮状态计算
|
||
const canStart = computed(() => {
|
||
return enabledChannels.value.some(c => c.runStatus === 0 || c.runStatus === 3)
|
||
})
|
||
|
||
const canPause = computed(() => {
|
||
return enabledChannels.value.some(c => c.runStatus === 1)
|
||
})
|
||
|
||
const canResume = computed(() => {
|
||
return enabledChannels.value.some(c => c.runStatus === 2)
|
||
})
|
||
|
||
const canStop = computed(() => {
|
||
return enabledChannels.value.some(c => c.runStatus === 1 || c.runStatus === 2)
|
||
})
|
||
|
||
// 页面加载
|
||
onLoad((options) => {
|
||
if (options.deviceId) {
|
||
deviceId.value = options.deviceId
|
||
deviceName.value = decodeURIComponent(options.deviceName || '') || 'Six-Channel Mixer'
|
||
serviceId.value = options.serviceId || ''
|
||
// 接收新协议1.2特征值UUID
|
||
settingCharId.value = options.settingCharId || ''
|
||
statusCharId.value = options.statusCharId || ''
|
||
controlCharId.value = options.controlCharId || ''
|
||
connected.value = true
|
||
}
|
||
|
||
// 加载设置
|
||
loadSettings()
|
||
|
||
// 初始化蓝牙通信
|
||
if (connected.value) {
|
||
initBluetooth()
|
||
}
|
||
})
|
||
|
||
// 页面卸载
|
||
onUnmounted(() => {
|
||
if (statusTimer) {
|
||
clearInterval(statusTimer)
|
||
statusTimer = null
|
||
}
|
||
})
|
||
|
||
// 加载设置
|
||
const loadSettings = () => {
|
||
try {
|
||
const savedData = uni.getStorageSync(STORAGE_KEY)
|
||
if (savedData) {
|
||
const data = JSON.parse(savedData)
|
||
// 合并设置数据和运行状态
|
||
channels.value = (data.channels || []).map(c => ({
|
||
...c,
|
||
runStatus: 0, // 运行状态: 0=等待 1=运行 2=暂停 3=完成
|
||
currentMode: 0, // 当前模式: 1=快速 2=慢速 3=静置
|
||
remainingTime: 0 // 剩余时间(秒)
|
||
}))
|
||
// 如果没有从 URL 接收到特征值，从本地存储读取
|
||
if (!settingCharId.value && data.settingCharId) {
|
||
settingCharId.value = data.settingCharId
|
||
}
|
||
if (!statusCharId.value && data.statusCharId) {
|
||
statusCharId.value = data.statusCharId
|
||
}
|
||
if (!controlCharId.value && data.controlCharId) {
|
||
controlCharId.value = data.controlCharId
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to load settings:', e)
|
||
}
|
||
}
|
||
|
||
// 初始化蓝牙
|
||
const initBluetooth = () => {
|
||
// 注册蓝牙数据监听
|
||
uni.onBLECharacteristicValueChange((res) => {
|
||
handleBluetoothData(res)
|
||
})
|
||
|
||
// 发送设置参数
|
||
sendSettings()
|
||
|
||
// 启动状态轮询
|
||
startStatusPolling()
|
||
}
|
||
|
||
// 发送设置参数到设备 (0xFF01)
|
||
const sendSettings = async () => {
|
||
const enabledList = enabledChannels.value
|
||
if (enabledList.length === 0) return
|
||
if (!settingCharId.value) {
|
||
console.error('设置参数特征值UUID未配置')
|
||
return
|
||
}
|
||
|
||
// 顺序发送每个通道的配置，避免蓝牙指令冲突
|
||
for (const channel of enabledList) {
|
||
const index = parseInt(channel.id.replace('CH', ''))
|
||
const buffer = buildSettingBuffer(index, channel)
|
||
await writeBLEDataAsync(settingCharId.value, buffer)
|
||
// 每条指令之间延迟100ms，确保蓝牙设备有时间处理
|
||
await new Promise(resolve => setTimeout(resolve, 100))
|
||
}
|
||
|
||
console.log(`已发送 ${enabledList.length} 条配置指令`)
|
||
}
|
||
|
||
// 构建设置参数buffer
|
||
// 格式: 电机序号(1) + 使能(1) + 快速模式(1) + 快速速度(2) + 快速时间(2) +
|
||
// 慢速模式(1) + 慢速速度(2) + 慢速时间(2) + 静置模式(1) + 静置速度(2) + 静置时间(2)
|
||
const buildSettingBuffer = (motorIndex, channel) => {
|
||
const buffer = new ArrayBuffer(17)
|
||
const view = new Uint8Array(buffer)
|
||
|
||
let offset = 0
|
||
view[offset++] = motorIndex // 电机序号 1-6
|
||
view[offset++] = channel.enabled ? 1 : 0 // 使能
|
||
|
||
// 快速模式
|
||
view[offset++] = 1 // 模式标识
|
||
view[offset++] = channel.fastSpeed & 0xFF // 速度低位
|
||
view[offset++] = (channel.fastSpeed >> 8) & 0xFF // 速度高位
|
||
view[offset++] = channel.fastTime & 0xFF // 时间低位(秒)
|
||
view[offset++] = (channel.fastTime >> 8) & 0xFF // 时间高位
|
||
|
||
// 慢速模式
|
||
view[offset++] = 2 // 模式标识
|
||
view[offset++] = channel.slowSpeed & 0xFF // 速度低位
|
||
view[offset++] = (channel.slowSpeed >> 8) & 0xFF // 速度高位
|
||
const slowTimeSeconds = channel.slowTime * 60 // 转换为秒
|
||
view[offset++] = slowTimeSeconds & 0xFF // 时间低位
|
||
view[offset++] = (slowTimeSeconds >> 8) & 0xFF // 时间高位
|
||
|
||
// 静置模式
|
||
view[offset++] = 3 // 模式标识
|
||
view[offset++] = 0 // 速度低位(固定0)
|
||
view[offset++] = 0 // 速度高位(固定0)
|
||
const stillTimeSeconds = channel.stillTime * 60 // 转换为秒
|
||
view[offset++] = stillTimeSeconds & 0xFF // 时间低位
|
||
view[offset++] = (stillTimeSeconds >> 8) & 0xFF // 时间高位
|
||
|
||
return buffer
|
||
}
|
||
|
||
// 启动状态轮询
|
||
const startStatusPolling = () => {
|
||
if (statusTimer) {
|
||
clearInterval(statusTimer)
|
||
}
|
||
|
||
// 每800ms查询一次状态
|
||
statusTimer = setInterval(() => {
|
||
readStatus()
|
||
}, 800)
|
||
|
||
// 立即查询一次
|
||
readStatus()
|
||
}
|
||
|
||
// 读取运行状态 (0xFF02)
|
||
const readStatus = () => {
|
||
if (!connected.value) return
|
||
if (!statusCharId.value) {
|
||
console.error('运行状态特征值UUID未配置')
|
||
return
|
||
}
|
||
|
||
uni.readBLECharacteristicValue({
|
||
deviceId: deviceId.value,
|
||
serviceId: serviceId.value,
|
||
characteristicId: statusCharId.value,
|
||
success: () => {
|
||
console.log('Read status success')
|
||
},
|
||
fail: (err) => {
|
||
console.error('Read status failed:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 处理蓝牙数据
|
||
const handleBluetoothData = (res) => {
|
||
const dataView = new Uint8Array(res.value)
|
||
const charId = res.characteristicId.toUpperCase()
|
||
|
||
// 判断是状态数据 (0xFF02)
|
||
if (charId.includes('FF02') || charId === statusCharId.value.toUpperCase()) {
|
||
parseStatusData(dataView)
|
||
}
|
||
}
|
||
|
||
// 解析状态数据
|
||
// 格式: [电机序号(1) + 使能(1) + 运行状态(1) + 工作模式(1) + 剩余时间(2)] × 6
|
||
const parseStatusData = (dataView) => {
|
||
const bytesPerMotor = 6
|
||
const motorCount = Math.floor(dataView.length / bytesPerMotor)
|
||
|
||
for (let i = 0; i < motorCount && i < 6; i++) {
|
||
const offset = i * bytesPerMotor
|
||
const motorIndex = dataView[offset]
|
||
const enabled = dataView[offset + 1]
|
||
const runStatus = dataView[offset + 2]
|
||
const workMode = dataView[offset + 3]
|
||
const remainingTime = dataView[offset + 4] | (dataView[offset + 5] << 8)
|
||
|
||
// 更新对应通道数据
|
||
const channel = channels.value.find(c => c.id === `CH${motorIndex}`)
|
||
if (channel) {
|
||
channel.runStatus = runStatus
|
||
channel.currentMode = workMode
|
||
channel.remainingTime = remainingTime
|
||
}
|
||
}
|
||
}
|
||
|
||
// 发送控制指令 (0xFF03)
|
||
// 指令码: 1=启动 2=暂停 3=继续 4=退出
|
||
const sendControl = (command) => {
|
||
const enabledList = enabledChannels.value
|
||
if (enabledList.length === 0) return
|
||
if (!controlCharId.value) {
|
||
console.error('控制指令特征值UUID未配置')
|
||
return
|
||
}
|
||
|
||
// 构建buffer: [电机序号, 指令码] × n
|
||
const buffer = new ArrayBuffer(enabledList.length * 2)
|
||
const view = new Uint8Array(buffer)
|
||
|
||
enabledList.forEach((channel, i) => {
|
||
const motorIndex = parseInt(channel.id.replace('CH', ''))
|
||
view[i * 2] = motorIndex
|
||
view[i * 2 + 1] = command
|
||
})
|
||
|
||
writeBLEData(controlCharId.value, buffer)
|
||
}
|
||
|
||
// 写入蓝牙数据（异步版本）
|
||
const writeBLEDataAsync = (characteristicId, buffer) => {
|
||
return new Promise((resolve, reject) => {
|
||
if (!connected.value) {
|
||
uni.showToast({ title: 'Bluetooth not connected', icon: 'none' })
|
||
reject(new Error('Bluetooth not connected'))
|
||
return
|
||
}
|
||
|
||
uni.writeBLECharacteristicValue({
|
||
deviceId: deviceId.value,
|
||
serviceId: serviceId.value,
|
||
characteristicId: characteristicId,
|
||
value: buffer,
|
||
success: () => {
|
||
console.log('Write success:', characteristicId)
|
||
resolve()
|
||
},
|
||
fail: (err) => {
|
||
console.error('Write failed:', characteristicId, err)
|
||
reject(err)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 写入蓝牙数据
|
||
const writeBLEData = (characteristicId, buffer) => {
|
||
if (!connected.value) {
|
||
uni.showToast({ title: 'Bluetooth not connected', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.writeBLECharacteristicValue({
|
||
deviceId: deviceId.value,
|
||
serviceId: serviceId.value,
|
||
characteristicId: characteristicId,
|
||
value: buffer,
|
||
success: () => {
|
||
console.log('Write success:', characteristicId)
|
||
},
|
||
fail: (err) => {
|
||
console.error('Write failed:', characteristicId, err)
|
||
uni.showToast({ title: 'Send failed', icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
|
||
// 控制按钮事件
|
||
const handleStart = () => {
|
||
if (!canStart.value) return
|
||
sendControl(1)
|
||
uni.showToast({ title: 'Starting...', icon: 'none' })
|
||
}
|
||
|
||
const handlePause = () => {
|
||
if (!canPause.value) return
|
||
sendControl(2)
|
||
uni.showToast({ title: 'Paused', icon: 'none' })
|
||
}
|
||
|
||
const handleResume = () => {
|
||
if (!canResume.value) return
|
||
sendControl(3)
|
||
uni.showToast({ title: 'Resuming...', icon: 'none' })
|
||
}
|
||
|
||
const handleStop = () => {
|
||
if (!canStop.value) return
|
||
|
||
uni.showModal({
|
||
title: 'Confirm Exit',
|
||
content: 'Are you sure to exit the current workflow?',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
sendControl(4)
|
||
uni.showToast({ title: 'Exited', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
const map = { 0: 'Waiting', 1: 'Running', 2: 'Paused', 3: 'Completed' }
|
||
return map[status] || 'Unknown'
|
||
}
|
||
|
||
// 获取状态样式类
|
||
const getStatusClass = (status) => {
|
||
const map = { 0: 'waiting', 1: 'running', 2: 'paused', 3: 'completed' }
|
||
return map[status] || 'waiting'
|
||
}
|
||
|
||
// 获取模式文本
|
||
const getModeText = (mode) => {
|
||
const map = { 0: '-', 1: 'Fast Mode', 2: 'Slow Mode', 3: 'Still Mode' }
|
||
return map[mode] || '-'
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (seconds) => {
|
||
if (!seconds || seconds <= 0) return '--:--'
|
||
const min = Math.floor(seconds / 60)
|
||
const sec = seconds % 60
|
||
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
|
||
}
|
||
|
||
// 计算进度百分比
|
||
const getProgressPercent = (channel) => {
|
||
if (channel.runStatus === 0 || channel.runStatus === 3) return 0
|
||
|
||
// 计算总时间
|
||
let totalTime = 0
|
||
if (channel.currentMode === 1) {
|
||
totalTime = channel.fastTime
|
||
} else if (channel.currentMode === 2) {
|
||
totalTime = channel.slowTime * 60
|
||
} else if (channel.currentMode === 3) {
|
||
totalTime = channel.stillTime * 60
|
||
}
|
||
|
||
if (totalTime <= 0) return 0
|
||
const elapsed = totalTime - channel.remainingTime
|
||
return Math.min(100, Math.max(0, (elapsed / totalTime) * 100))
|
||
}
|
||
|
||
// 返回/跳转到设置页面
|
||
const goBack = () => {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
// 页面栈为空（预览模式），直接跳转
|
||
uni.redirectTo({ url: '/pages/mixer/setting' })
|
||
}
|
||
}
|
||
|
||
// 跳转到设置页面
|
||
const goToSetting = () => {
|
||
goBack()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.control-page {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
// 自定义导航栏
|
||
.custom-navbar {
|
||
width: 100%;
|
||
background: rgba(102, 126, 234, 0.9);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
padding-top: max(env(safe-area-inset-top), 20px);
|
||
|
||
.navbar-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
.nav-center {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
.nav-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav-left, .nav-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.bluetooth-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.status-text {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.control-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: max(calc(44px + env(safe-area-inset-top)), 64px);
|
||
padding-bottom: 120rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 空状态提示
|
||
.empty-tip {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
|
||
.empty-text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.empty-hint {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
.channel-scroll {
|
||
flex: 1;
|
||
padding: 16rpx 20rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.channel-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.channel-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.channel-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
}
|
||
|
||
.status-badge {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
|
||
&.waiting {
|
||
background: #f1f5f9;
|
||
color: #64748b;
|
||
}
|
||
|
||
&.running {
|
||
background: #dcfce7;
|
||
color: #16a34a;
|
||
}
|
||
|
||
&.paused {
|
||
background: #fef3c7;
|
||
color: #d97706;
|
||
}
|
||
|
||
&.completed {
|
||
background: #dbeafe;
|
||
color: #2563eb;
|
||
}
|
||
}
|
||
|
||
.status-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.mode-status-row {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.mode-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 8rpx;
|
||
border-radius: 8rpx;
|
||
background: #f1f5f9;
|
||
position: relative;
|
||
|
||
.mode-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.mode-name {
|
||
font-size: 20rpx;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.done-mark {
|
||
position: absolute;
|
||
top: 2rpx;
|
||
right: 4rpx;
|
||
font-size: 18rpx;
|
||
color: #22c55e;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
|
||
.mode-name {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&.done {
|
||
background: #dcfce7;
|
||
|
||
.mode-name {
|
||
color: #16a34a;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-row {
|
||
flex: 1;
|
||
|
||
.info-label {
|
||
font-size: 22rpx;
|
||
color: #94a3b8;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #334155;
|
||
font-weight: 600;
|
||
|
||
&.time {
|
||
font-family: monospace;
|
||
color: #667eea;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 8rpx;
|
||
background: #e2e8f0;
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||
border-radius: 4rpx;
|
||
transition: width 0.3s ease;
|
||
}
|
||
}
|
||
|
||
// 控制按钮区域
|
||
.control-buttons {
|
||
padding: 20rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.button-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.ctrl-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
|
||
&.start {
|
||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||
}
|
||
|
||
&.pause {
|
||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||
}
|
||
|
||
&.resume {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
}
|
||
|
||
&.stop {
|
||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
// 底部Tab导航
|
||
.bottom-tabs {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4rpx;
|
||
|
||
.tab-text {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
|
||
&.active {
|
||
color: #667eea;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
</style>
|