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

Composables 是 Vue 3 中的一种功能强大的工具，它允许你创建可复用的小型独立函数或计算属性，用于解决特定的问题。在这个场景下，如果你想要封装一个通用的倒计时功能，你可以这样做：

首先，在 `composables` 文件夹里创建一个名为 ` countdown.ts` 的文件，内容如下：

import { ref, onMounted } from 'vue';

export default function useCountdown(targetTime: number) {
  const remainingTime = ref(targetTime);
  let timerId;

  // 初始化倒计时
  onMounted(() => {
    const intervalId = setInterval(() => {
      if (remainingTime.value > 0) {
        remainingTime.value--;
      } else {
        clearInterval(intervalId); // 倒计时结束时清除定时器
      }
    }, 1000); // 每秒更新一次剩余时间
  });

  // 提供公共方法来开始、暂停和重置倒计时
  const start = () => {
    timerId = setInterval(...);
  };
  
  const pause = () => {
    clearInterval(timerId);
  };

  const reset = () => {
    remainingTime.value = targetTime;
    pause();
  };

  return {
    remainingTime,
    start,
    pause,
    reset
  };
}

然后，在你的 `.vue` 组件中导入并使用这个倒计时 composable：

<template>
  <div>
    <p>剩余时间: {{ remainingTime }}</p>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
import { useCountdown } from './composables/countdown';

const { remainingTime, start, pause, reset } = useCountdown(60); // 设置目标时间为60秒

// 使用倒计时功能
useEffect(() => {}, [remainingTime]); // 当剩余时间变化时，重新渲染组件

// 组件内的事件处理
const handleClick = (action: 'start' | 'pause' | 'reset') => {
  switch (action) {
    case 'start':
      start();
      break;
    case 'pause':
      pause();
      break;
    case 'reset':
      reset();
      break;
  }
};

<button @click={() => handleClick('start')}>开始</button>
<!-- ... -->
</script>

通过这种方式，你可以在任何需要倒计时的地方复用 `useCountdown`，只需要传入目标时间即可。