composables封装一个通用的倒计时计时器逻辑，可复用到多个组件中，有.ts和.vue文件

Composables是Vue.js中的一种高级功能，它允许你在整个应用中复用小型、独立的功能模块，比如这个通用的倒计时计时器逻辑。通过将倒计时相关的计算和逻辑封装成一个名为`useCountdown`的composable，你可以轻松地在多个`.vue`组件中导入并使用。

在`.ts`文件中，这样的composable可能会长这样：

import { ref, onMounted } from 'vue';

export default function useCountdown(totalSeconds: number) {
  const countdown = ref(0);
  let timerId;

  // 初始化计时器
  onMounted(() => {
    timerId = setInterval(() => {
      countdown.value -= 1;
      if (countdown.value <= 0) {
        clearInterval(timerId); // 当倒计时结束时停止计时器
        countdown.value = 0; // 重置计数
      }
    }, 1000); // 每秒更新一次
  });

  // 提供公共API
  return {
    countdown,
    stop: () => clearInterval(timerId), // 可以在需要的地方暂停或停止计时
  };
}

然后，在`.vue`组件中，你只需要导入并使用这个composable：

<template>
  <div>
    <p>剩余时间: {{ countdown }}</p>
    <button @click="stop">停止计时</button>
  </div>
</template>

<script setup>
import { useCountdown } from './your-countdown-composable.ts';

const totalSeconds = 60; // 设置倒计时总秒数
const countdownInstance = useCountdown(totalSeconds);

// 使用计时器实例
const countdown = countdownInstance.countdown;
const stop = countdownInstance.stop;
</script>