PPT/src/views/Screen/CountdownTimer.vue

<template>
  <MoveablePanel 
    class="countdown-timer" 
    :width="250"
    :height="170"
    :left="left" 
    :top="top"
  >
    <div class="panel-body">
      <div class="row time-row">
        <div class="time-box">
          <input 
            ref="hourInputRef"
            type="number" 
            class="digit-input" 
            v-model.number="hourInput" 
            @blur="handleBlur"
            @click="focusedInput = 'hour'"
            @focus="handleFocus('hour')"
            @keyup.enter="handleEnter"
            min="0"
          />
          <span class="colon">:</span>
          <input 
            ref="minuteInputRef"
            type="number" 
            class="digit-input" 
            v-model.number="minuteInput" 
            @blur="handleBlur"
            @click="focusedInput = 'minute'"
            @focus="handleFocus('minute')"
            @keyup.enter="handleEnter"
            min="0"
            max="59"
          />
          <span class="colon">:</span>
          <input 
            ref="secondInputRef"
            type="number" 
            class="digit-input" 
            v-model.number="secondInput" 
            @blur="handleBlur"
            @click="focusedInput = 'second'"
            @focus="handleFocus('second')"
            @keyup.enter="handleEnter"
            min="0"
            max="59"
          />
        </div>
        <div class="side-controls">
          <button class="square-btn" @click="increment()">+</button>
          <button class="square-btn" @click="decrement()" :disabled="time <= 0">−</button>
        </div>
      </div>
      <div class="divider"></div>
      <button class="primary-btn" @click="toggle()">{{ inTiming ? lang.ssPause : lang.ssStartTimer }}</button>
    </div>
    <!-- <div class="close-btn" @click="emit('close')"><IconClose class="icon" /></div> -->
  </MoveablePanel>
</template>

<script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue'

import MoveablePanel from '@/components/MoveablePanel2.vue'
import { lang } from '@/main'

withDefaults(defineProps<{
  left?: number
  top?: number
}>(), {
  left: -200,
  top: -100,
})

const emit = defineEmits<{
  (event: 'close'): void
  (event: 'timer-start', payload: { isCountdown: boolean; startAt: string; durationSec?: number }): void
  (event: 'timer-pause', payload: { pausedAt: string }): void
  (event: 'timer-reset'): void
  (event: 'timer-stop'): void
  (event: 'timer-finish'): void
  (event: 'timer-update', payload: { durationSec: number }): void
}>()

const timer = ref<number | null>(null)
const inTiming = ref(false)
// 仅倒计时模式，默认 03:00:00
const time = ref(5 * 60)

// 可编辑的时分秒输入值
const hourInput = ref(3)
const minuteInput = ref(0)
const secondInput = ref(0)

// 输入框引用
const hourInputRef = ref<HTMLInputElement | null>(null)
const minuteInputRef = ref<HTMLInputElement | null>(null)
const secondInputRef = ref<HTMLInputElement | null>(null)

// 当前聚焦的输入框类型：'hour' | 'minute' | 'second' | null
const focusedInput = ref<'hour' | 'minute' | 'second' | null>(null)
// 当前正在编辑的输入框（有焦点）
const editingInput = ref<'hour' | 'minute' | 'second' | null>(null)

// 从 time 同步到输入框（如果输入框没有被编辑）
watch(time, (newTime) => {
  if (editingInput.value !== 'hour') {
    hourInput.value = Math.floor(newTime / 3600)
  }
  if (editingInput.value !== 'minute') {
    minuteInput.value = Math.floor((newTime % 3600) / 60)
  }
  if (editingInput.value !== 'second') {
    secondInput.value = newTime % 60
  }
}, { immediate: true })

// 处理输入框获得焦点
const handleFocus = (type: 'hour' | 'minute' | 'second') => {
  focusedInput.value = type
  editingInput.value = type
}

// 处理输入框失焦
const handleBlur = () => {
  editingInput.value = null
  updateTimeFromInputs()
  // 不清除选中状态，保持用户选择的输入框，直到用户点击其他输入框
}

// 处理回车键
const handleEnter = () => {
  if (editingInput.value) {
    editingInput.value = null
    updateTimeFromInputs()
    // 失焦当前输入框
    if (hourInputRef.value && document.activeElement === hourInputRef.value) {
      hourInputRef.value.blur()
    }
    else if (minuteInputRef.value && document.activeElement === minuteInputRef.value) {
      minuteInputRef.value.blur()
    }
    else if (secondInputRef.value && document.activeElement === secondInputRef.value) {
      secondInputRef.value.blur()
    }
  }
}

// 从输入框更新 time 值
const updateTimeFromInputs = () => {
  // 验证并限制输入范围
  const h = Math.max(0, hourInput.value || 0)
  const m = Math.max(0, Math.min(59, minuteInput.value || 0))
  const s = Math.max(0, Math.min(59, secondInput.value || 0))
  
  // 更新输入值（确保显示正确）
  hourInput.value = h
  minuteInput.value = m
  secondInput.value = s
  
  // 计算总秒数（不限制最大时间）
  const newTime = h * 3600 + m * 60 + s
  const oldTime = time.value
  time.value = newTime
  
  // 如果正在计时且时间发生变化，重新开始计时
  if (inTiming.value && newTime !== oldTime) {
    restart()
  }
}

const clearTimer = () => {
  if (timer.value !== null) {
    clearInterval(timer.value)
  }
}

onUnmounted(clearTimer)

const pause = () => {
  clearTimer()
  inTiming.value = false
  emit('timer-pause', { pausedAt: new Date().toISOString() })
}

const start = () => {
  clearTimer()

  // 倒计时
  timer.value = window.setInterval(() => {
    time.value = time.value - 1

    if (time.value <= 0) {
      time.value = 0
      clearTimer()
      inTiming.value = false
      emit('timer-finish')
    }
  }, 1000)

  inTiming.value = true
  emit('timer-start', { isCountdown: true, startAt: new Date().toISOString(), durationSec: time.value })
}

// 重新开始计时（用于时间更新时重置）
const restart = () => {
  if (!inTiming.value) return
  clearTimer()
  
  // 倒计时
  timer.value = window.setInterval(() => {
    time.value = time.value - 1

    if (time.value <= 0) {
      time.value = 0
      clearTimer()
      inTiming.value = false
      emit('timer-finish')
    }
  }, 1000)
  
  emit('timer-start', { isCountdown: true, startAt: new Date().toISOString(), durationSec: time.value })
}

const toggle = () => {
  if (inTiming.value) pause()
  else start()
}

onUnmounted(() => {
  emit('timer-stop')
})

// 根据当前聚焦的输入框增加时间（默认操作秒）
const increment = () => {
  const currentFocus = focusedInput.value || 'second' // 默认操作秒
  
  if (currentFocus === 'hour') {
    hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
  }
  else if (currentFocus === 'minute') {
    const newMinute = (minuteInput.value || 0) + 1
    if (newMinute > 59) {
      minuteInput.value = 0
      hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
    }
    else {
      minuteInput.value = newMinute
    }
  }
  else {
    // 默认操作秒
    const newSecond = (secondInput.value || 0) + 1
    if (newSecond > 59) {
      secondInput.value = 0
      const newMinute = (minuteInput.value || 0) + 1
      if (newMinute > 59) {
        minuteInput.value = 0
        hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
      }
      else {
        minuteInput.value = newMinute
      }
    }
    else {
      secondInput.value = newSecond
    }
  }
  
  // 更新总时间
  updateTimeFromInputs()
}

// 根据当前聚焦的输入框减少时间（默认操作秒）
const decrement = () => {
  const currentFocus = focusedInput.value || 'second' // 默认操作秒
  
  if (currentFocus === 'hour') {
    hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
  }
  else if (currentFocus === 'minute') {
    const newMinute = (minuteInput.value || 0) - 1
    if (newMinute < 0) {
      if (hourInput.value > 0) {
        minuteInput.value = 59
        hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
      }
      else {
        minuteInput.value = 0
      }
    }
    else {
      minuteInput.value = newMinute
    }
  }
  else {
    // 默认操作秒
    const newSecond = (secondInput.value || 0) - 1
    if (newSecond < 0) {
      if (minuteInput.value > 0 || hourInput.value > 0) {
        secondInput.value = 59
        const newMinute = (minuteInput.value || 0) - 1
        if (newMinute < 0) {
          if (hourInput.value > 0) {
            minuteInput.value = 59
            hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
          }
          else {
            minuteInput.value = 0
          }
        }
        else {
          minuteInput.value = newMinute
        }
      }
      else {
        secondInput.value = 0
      }
    }
    else {
      secondInput.value = newSecond
    }
  }
  
  // 更新总时间
  updateTimeFromInputs()
}
</script>

<style lang="scss" scoped>
.countdown-timer {
  user-select: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  /* padding: 14px; */
}
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.colon {
  margin: 0 6px;
  color: #fff;
}
.time-box {
  display: flex;
  align-items: baseline;
}
.digit-input {
  width: 50px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.digit-input::-webkit-outer-spin-button,
.digit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.digit-input:disabled {
  opacity: 1;
  cursor: not-allowed;
}
.digit-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.side-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.square-btn {
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.square-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: 2px 0;
}
.primary-btn {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #ffcc00;
  color: #333;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.primary-btn:hover {
  filter: brightness(0.98);
}
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
}
</style>