useCountDown

cli/create.mjs

@@ -43,11 +43,11 @@ export default async () => {
   const hooksType = await select({
     message: '请选择Hooks用途分类：',
     choices: [
-      { name: '通用', value: 'common', description: '通用' },
-      { name: '业务', value: 'business', description: '业务相关' },
-      { name: '状态', value: 'business', description: '操作状态相关' },
+      { name: '通用', value: 'Common', description: '通用' },
+      { name: '业务', value: 'Worker', description: '业务相关' },
+      { name: '状态', value: 'State', description: '操作状态相关' },
       { name: '文档对象', value: 'Dom', description: '操作Dom相关' },
-      { name: '其他', value: 'other', description: '其他杂项' },
+      { name: '其他', value: 'Other', description: '其他杂项' },
     ],
   });
 

docs/.vitepress/router.mjs

@@ -19,7 +19,7 @@ const Router = {
     'useDebounce',
   ],
   Data: ['useTable'],
-  Worker: ['useWorkerFunction'],
+  Worker: ['useCountDown','useWorkerFunction'],
 };
 
 function getRouterConfig(langPrefix = '/') {

docs/useCountDown/demo/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="mb-10" @click="countDown.start()">开始倒计时</div>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+  });
+
+  current.value = countDown.current;
+</script>

docs/useCountDown/demo/index2.vue

@@ -0,0 +1,22 @@
+<template>
+  <a-space>
+    <a-button @click="countDown.start()">开始倒计时</a-button>
+    <a-button @click="countDown.pause()">暂停倒计时</a-button>
+  </a-space>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+  });
+
+  current.value = countDown.current;
+</script>

docs/useCountDown/demo/millisecond.vue

@@ -0,0 +1,20 @@
+<template>
+  <a-button @click="countDown.start()">开始倒计时</a-button>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+    millisecond: true,
+  });
+
+  current.value = countDown.current;
+</script>

docs/useCountDown/index.md

@@ -0,0 +1,46 @@
+# useCountDown
+
+提供倒计时管理能力。
+
+## 基本用法
+
+<preview path="./demo/index.vue" title="基本使用" ></preview>
+
+## 毫秒级渲染
+
+<preview path="./demo/millisecond.vue" title="毫秒级渲染" ></preview>
+
+## 开始 / 暂停
+
+<preview path="./demo/index2.vue" title="开始 / 暂停" ></preview>
+
+## API
+
+### CurrentTime 格式
+
+| 名称         | 说明                   | 类型     |
+| ------------ | ---------------------- | -------- |
+| total        | 剩余总时间（单位毫秒） | _number_ |
+| days         | 剩余天数               | _number_ |
+| hours        | 剩余小时               | _number_ |
+| minutes      | 剩余分钟               | _number_ |
+| seconds      | 剩余秒数               | _number_ |
+| milliseconds | 剩余毫秒               | _number_ |
+
+### 参数
+
+| 参数        | 说明                       | 类型                             | 默认值  |
+| ----------- | -------------------------- | -------------------------------- | ------- |
+| time        | 倒计时时长，单位毫秒       | _number_                         | -       |
+| millisecond | 是否开启毫秒级渲染         | _boolean_                        | `false` |
+| onChange    | 倒计时改变时触发的回调函数 | _(current: CurrentTime) => void_ | -       |
+| onFinish    | 倒计时结束时触发的回调函数 | _() => void_                     | -       |
+
+### 返回值
+
+| 参数    | 说明                               | 类型                    |
+| ------- | ---------------------------------- | ----------------------- |
+| current | 当前剩余的时间                     | _CurrentTime_           |
+| start   | 开始倒计时                         | _() => void_            |
+| pause   | 暂停倒计时                         | _() => void_            |
+| reset   | 重置倒计时，支持传入新的倒计时时长 | _(time?: number): void_ |

packages/hooks/src/index.ts

@@ -1,8 +1,10 @@
 import useBoolean from './useBoolean';
 import useToggle from './useToggle';
 import useRect from "./useRect";
+import useCountDown from "./useCountDown";
 export {
   useBoolean,
   useToggle,
-  useRect
+  useRect,
+  useCountDown
 };

packages/hooks/src/router.js

@@ -1,5 +1,6 @@
 // 路由映射表
 const Router = {
-  Dom: ["useRect"]
+  Dom: ['useRect'],
+  Worker: ['useCountDown'],
 };
-export default Router;
+export default Router;

packages/hooks/src/useCountDown/demo/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="mb-10" @click="countDown.start()">开始倒计时</div>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+  });
+
+  current.value = countDown.current;
+</script>

packages/hooks/src/useCountDown/demo/index2.vue

@@ -0,0 +1,22 @@
+<template>
+  <a-space>
+    <a-button @click="countDown.start()">开始倒计时</a-button>
+    <a-button @click="countDown.pause()">暂停倒计时</a-button>
+  </a-space>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+  });
+
+  current.value = countDown.current;
+</script>

packages/hooks/src/useCountDown/demo/millisecond.vue

@@ -0,0 +1,20 @@
+<template>
+  <a-button @click="countDown.start()">开始倒计时</a-button>
+
+  <div style="margin-top: 10px">总时间：{{ current }}</div>
+</template>
+
+<script setup>
+  import { useCountDown } from 'zhongjiayao_v3_hooks';
+  import { ref } from 'vue';
+
+  const current = ref({});
+
+  const countDown = useCountDown({
+    // 倒计时 24 小时
+    time: 24 * 60 * 60 * 1000,
+    millisecond: true,
+  });
+
+  current.value = countDown.current;
+</script>

packages/hooks/src/useCountDown/index.md

@@ -0,0 +1,46 @@
+# useCountDown
+
+提供倒计时管理能力。
+
+## 基本用法
+
+<preview path="./demo/index.vue" title="基本使用" ></preview>
+
+## 毫秒级渲染
+
+<preview path="./demo/millisecond.vue" title="毫秒级渲染" ></preview>
+
+## 开始 / 暂停
+
+<preview path="./demo/index2.vue" title="开始 / 暂停" ></preview>
+
+## API
+
+### CurrentTime 格式
+
+| 名称         | 说明                   | 类型     |
+| ------------ | ---------------------- | -------- |
+| total        | 剩余总时间（单位毫秒） | _number_ |
+| days         | 剩余天数               | _number_ |
+| hours        | 剩余小时               | _number_ |
+| minutes      | 剩余分钟               | _number_ |
+| seconds      | 剩余秒数               | _number_ |
+| milliseconds | 剩余毫秒               | _number_ |
+
+### 参数
+
+| 参数        | 说明                       | 类型                             | 默认值  |
+| ----------- | -------------------------- | -------------------------------- | ------- |
+| time        | 倒计时时长，单位毫秒       | _number_                         | -       |
+| millisecond | 是否开启毫秒级渲染         | _boolean_                        | `false` |
+| onChange    | 倒计时改变时触发的回调函数 | _(current: CurrentTime) => void_ | -       |
+| onFinish    | 倒计时结束时触发的回调函数 | _() => void_                     | -       |
+
+### 返回值
+
+| 参数    | 说明                               | 类型                    |
+| ------- | ---------------------------------- | ----------------------- |
+| current | 当前剩余的时间                     | _CurrentTime_           |
+| start   | 开始倒计时                         | _() => void_            |
+| pause   | 暂停倒计时                         | _() => void_            |
+| reset   | 重置倒计时，支持传入新的倒计时时长 | _(time?: number): void_ |