electron倒计时程序

<script setup lang="ts">
import { Redo, StopwatchStart, Config } from '@icon-park/vue-next';
import { onMounted, ref } from 'vue';
import convertMinutesToHMS from '../src/utils/convertMinutesToHMS.ts';

//秒数
let countdown = ref<number>(0)
let minutes = ref<number>(0)
const audio = new Audio('/public/军旅歌曲 - 起床号.mp3');


const isCounting = ref(false); // 倒计时状态
const showText = ref()
const dialogVisible = ref(false)


onMounted(() => {
  countdown.value = minutes.value * 60
  showText.value = convertMinutesToHMS(countdown.value)
})
const refresh = () => {
  countdown.value = 0
  isCounting.value = false
  audio.pause();
  audio.currentTime = 0;
  showText.value = convertMinutesToHMS(countdown.value)
}
const setting = () => {
  isCounting.value = false
  dialogVisible.value = true
}
const ok = () => {
  dialogVisible.value = false
  countdown.value = minutes.value * 60
  showText.value = convertMinutesToHMS(countdown.value)
}
const start = () => {
  isCounting.value = true;
  const countdownTimer = () => {
    if (isCounting.value === true && countdown.value != 0) {
      countdown.value--;
      showText.value = convertMinutesToHMS(countdown.value);
      if (countdown.value === 0) {
        showText.value = '倒计时结束'
        audio.play();
        isCounting.value = false;
      } else {
        setTimeout(countdownTimer, 1000);
      }
    }
  };
  countdownTimer();
}
</script>
  
<template>
  <div>
    <span id='showText'>{
   
   { showText }}</span>
    <span class="refresh">
      <redo @click="refresh" class="redo" theme="outline" size="20" fill="#f5a623" style="margin-right: 10px;" />
    </span>
    <span class="refresh"><stopwatch-start @click="start" theme="outline" size="20" fill="#f5a623"
        style="margin-right: 10px;" /></span>
    <span class="refresh">
      <config theme="outline" size="20" fill="#f5a623" @click="setting" />
    </span>
    <el-dialog v-model="dialogVisible" width="100%" height="30px">
      <template #footer>
        <span class="dialog-footer">
          <el-input v-model.number="minutes" placeholder="请输入分钟数"></el-input>
          <el-button type="primary" @click="ok">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.refresh:hover {
  cursor: pointer;
}

#showText {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: orange;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
}
</style>