Skip to content

feat: 新增 SkCountDown 倒计时组件 #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wangyong1997 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: 新增 SkCountDown 倒计时组件 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d692d1
chore: release v1.1.1
wangyong1997 Nov 28, 2025
89724f7
feat: 新增 SkCountDown 倒计时组件
wangyong1997 Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/uni/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@skiyee/uni-example",
"type": "module",
"version": "1.1.0",
"version": "1.1.1",
"private": true,
"scripts": {
"dev": "uni",
Expand Down
73 changes: 73 additions & 0 deletions examples/uni/src/pages-feedback/count-down/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<script setup lang="ts">
import { ref } from 'vue'

const countDown = ref()
const time = ref(30 * 60 * 1000) // 30 minutes

function reset() {
countDown.value?.reset()
}

function start() {
countDown.value?.start()
}

function pause() {
countDown.value?.pause()
}

function onFinish() {
uni.showToast({
title: '倒计时结束',
icon: 'none',
})
}
</script>

<template>
<div class="flex flex-col items-center gap-4 p-4">
<div class="text-lg font-bold mb-2">
基础用法
</div>
<SkCountDown :time="time" @finish="onFinish" />

<div class="text-lg font-bold mb-2 mt-4">
自定义格式
</div>
<SkCountDown :time="time" format="HH:mm:ss" />
<SkCountDown :time="time" format="DD天 HH时 mm分 ss秒" />

<div class="text-lg font-bold mb-2 mt-4">
手动控制
</div>
<SkCountDown
ref="countDown"
:time="5000"
:auto-start="false"
format="ss"
@finish="onFinish"
/>
<div class="flex gap-2">
<SkButton size="mini" @click="start">
开始
</SkButton>
<SkButton size="mini" @click="pause">
暂停
</SkButton>
<SkButton size="mini" @click="reset">
重置
</SkButton>
</div>

<div class="text-lg font-bold mb-2 mt-4">
自定义样式
</div>
<SkCountDown :time="time">
<template #default="{ hours, minutes, seconds }">
<span class="block px-2 py-1 bg-blue-500 text-white rounded">
{{ hours }}:{{ minutes }}:{{ seconds }}
</span>
</template>
</SkCountDown>
</div>
</template>
44 changes: 44 additions & 0 deletions examples/uni/src/pages-feedback/count-down/control.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<script setup lang="ts">
import { ref } from 'vue';

const countDown = ref();
const time = ref(5000);

function start() {
countDown.value?.start();
}

function pause() {
countDown.value?.pause();
}

function reset() {
countDown.value?.reset();
}

function onFinish() {
uni.showToast({
title: '倒计时结束',
icon: 'none'
});
}
</script>
Comment on lines +1 to +25
Copy link

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

修复代码风格问题。

ESLint 检测到多处额外的分号。请移除这些分号以符合项目的代码风格规范。

建议应用以下修改：

-import { ref } from 'vue';
+import { ref } from 'vue'

-const countDown = ref();
-const time = ref(5000);
+const countDown = ref()
+const time = ref(5000)

 function start() {
-  countDown.value?.start();
+  countDown.value?.start()
 }

 function pause() {
-  countDown.value?.pause();
+  countDown.value?.pause()
 }

 function reset() {
-  countDown.value?.reset();
+  countDown.value?.reset()
 }

 function onFinish() {
   uni.showToast({
     title: '倒计时结束',
     icon: 'none'
-  });
+  })
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<script setup lang="ts">
import { ref } from 'vue';
const countDown = ref();
const time = ref(5000);
function start() {
countDown.value?.start();
}
function pause() {
countDown.value?.pause();
}
function reset() {
countDown.value?.reset();
}
function onFinish() {
uni.showToast({
title: '倒计时结束',
icon: 'none'
});
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
const countDown = ref()
const time = ref(5000)
function start() {
countDown.value?.start()
}
function pause() {
countDown.value?.pause()
}
function reset() {
countDown.value?.reset()
}
function onFinish() {
uni.showToast({
title: '倒计时结束',
icon: 'none'
})
}
</script>
🧰 Tools
🪛 ESLint

[error] 2-2: Extra semicolon.

(style/semi)

[error] 4-4: Extra semicolon.

(style/semi)

[error] 5-5: Extra semicolon.

(style/semi)

[error] 8-8: Extra semicolon.

(style/semi)

[error] 12-12: Extra semicolon.

(style/semi)

[error] 16-16: Extra semicolon.

(style/semi)

[error] 23-23: Extra semicolon.

(style/semi)

🤖 Prompt for AI Agents 
In examples/uni/src/pages-feedback/count-down/control.vue around lines 1 to 25,
ESLint flagged extraneous semicolons; remove the unnecessary semicolons at the
ends of the import statement, ref declarations, and all function definitions so
the file follows project code-style (no trailing semicolons) while keeping code
structure and behavior unchanged.


<template>
<div class="flex flex-col gap-4 p-4">
<div class="text-lg font-bold">手动控制</div>
<SkCountDown
ref="countDown"
:time="time"
:auto-start="false"
format="ss:SSS"
@finish="onFinish"
/>

<div class="flex gap-2 mt-4">
<SkButton size="mini" @click="start">开始</SkButton>
<SkButton size="mini" @click="pause">暂停</SkButton>
<SkButton size="mini" @click="reset">重置</SkButton>
</div>
</div>
</template>
31 changes: 31 additions & 0 deletions examples/uni/src/pages-feedback/count-down/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup lang="ts">
import { ref } from 'vue';
Copy link

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

修复代码风格问题。

ESLint 检测到多余的分号。为保持代码风格一致性，建议移除 import 语句末尾的分号。

应用以下修改：

-import { ref } from 'vue';
+import { ref } from 'vue'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { ref } from 'vue';
import { ref } from 'vue'
🧰 Tools
🪛 ESLint

[error] 2-2: Extra semicolon.

(style/semi)

🤖 Prompt for AI Agents 
在 examples/uni/src/pages-feedback/count-down/custom.vue 第2行，import 语句末尾包含多余的分号导致
ESLint 报告代码风格问题；请删除该行结尾的分号以符合项目的代码风格规则并通过 lint 检查，保持文件中所有 import 语句一致性。


const time = ref(30 * 60 * 1000); // 30 minutes
Copy link

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

修复代码风格问题。

建议移除此行末尾的分号，与项目代码风格保持一致。

应用以下修改：

-const time = ref(30 * 60 * 1000); // 30 minutes
+const time = ref(30 * 60 * 1000) // 30 minutes
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const time = ref(30 * 60 * 1000); // 30 minutes
const time = ref(30 * 60 * 1000) // 30 minutes
🧰 Tools
🪛 ESLint

[error] 4-4: Extra semicolon.

(style/semi)

🤖 Prompt for AI Agents 
In examples/uni/src/pages-feedback/count-down/custom.vue around line 4, the
statement "const time = ref(30 * 60 * 1000);" has a trailing semicolon that
violates the project code style; remove the semicolon at the end of the line so
it reads without the semicolon and ensure the file follows the project's
no-semicolon style.

</script>

<template>
<div class="flex flex-col gap-4 p-4">
<div class="text-lg font-bold">自定义样式</div>
<SkCountDown :time="time">
<template #default="{ hours, minutes, seconds }">
<span class="block px-2 py-1 bg-blue-500 text-white rounded">
{{ hours }}:{{ minutes }}:{{ seconds }}
</span>
</template>
</SkCountDown>

<div class="text-lg font-bold mt-4">自定义块级样式</div>
<SkCountDown :time="time">
<template #default="{ hours, minutes, seconds }">
<div class="flex items-center gap-1">
<span class="bg-red-500 text-white px-1 rounded">{{ hours }}</span>
<span>:</span>
<span class="bg-red-500 text-white px-1 rounded">{{ minutes }}</span>
<span>:</span>
<span class="bg-red-500 text-white px-1 rounded">{{ seconds }}</span>
</div>
</template>
</SkCountDown>
</div>
</template>
39 changes: 39 additions & 0 deletions examples/uni/src/pages-feedback/count-down/format.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script setup lang="ts">
import { ref } from 'vue'

const time = ref(30 * 60 * 1000) // 30 minutes
</script>

<template>
<div class="flex flex-col gap-4 p-4">
<div class="text-lg font-bold">
默认格式 (HH:mm:ss)
</div>
<SkCountDown :time="time" />

<div class="text-lg font-bold mt-4">
自定义格式 (mm:ss)
</div>
<SkCountDown :time="time" format="mm:ss" />

<div class="text-lg font-bold mt-4">
自定义格式 (DD天 HH时 mm分 ss秒)
</div>
<SkCountDown :time="2 * 24 * 60 * 60 * 1000 + time" format="DD天 HH时 mm分 ss秒" />

<div class="text-lg font-bold mt-4">
带毫秒 (ss.S)
</div>
<SkCountDown :time="time" format="ss.S" />

<div class="text-lg font-bold mt-4">
带毫秒 (ss.SS)
</div>
<SkCountDown :time="time" format="ss.SS" />

<div class="text-lg font-bold mt-4">
带毫秒 (ss.SSS)
</div>
<SkCountDown :time="time" format="ss.SSS" />
</div>
</template>
18 changes: 17 additions & 1 deletion examples/uni/src/pages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -637,6 +637,22 @@
{
"root": "pages-feedback",
"pages": [
{
"path": "count-down/base",
"type": "page"
},
{
"path": "count-down/control",
"type": "page"
},
{
"path": "count-down/custom",
"type": "page"
},
{
"path": "count-down/format",
"type": "page"
},
{
"path": "dialog/base",
"type": "page"
Expand Down Expand Up @@ -733,4 +749,4 @@
]
}
]
}
}
2 changes: 2 additions & 0 deletions examples/uni/types/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ declare module 'vue' {
SkButton: typeof import('@skiyee/uni-ui/components/sk-button.vue')['default']
SkCheckbox: typeof import('@skiyee/uni-ui/components/sk-checkbox.vue')['default']
SkCheckboxGroup: typeof import('@skiyee/uni-ui/components/sk-checkbox-group.vue')['default']
SkCountDown: typeof import('@skiyee/uni-ui/components/sk-count-down.vue')['default']
SKCountDown: typeof import('@skiyee/uni-ui/components/sk-count-down.vue')['default']
SkDialog: typeof import('@skiyee/uni-ui/components/sk-dialog.vue')['default']
SkField: typeof import('@skiyee/uni-ui/components/sk-field.vue')['default']
SkForm: typeof import('@skiyee/uni-ui/components/sk-form.vue')['default']
Expand Down
4 changes: 4 additions & 0 deletions examples/uni/types/pages.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ interface NavigateToOptions {
"/pages-form/textarea/show-count" |
"/pages-form/textarea/size" |
"/pages-form/textarea/usage" |
"/pages-feedback/count-down/base" |
"/pages-feedback/count-down/control" |
"/pages-feedback/count-down/custom" |
"/pages-feedback/count-down/format" |
"/pages-feedback/dialog/base" |
"/pages-feedback/dialog/dismissable" |
"/pages-feedback/dialog/long-content" |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@skiyee/workspace",
"type": "module",
"version": "1.1.0",
"version": "1.1.1",
"private": true,
"packageManager": "[email protected]",
"author": {
Expand Down
2 changes: 1 addition & 1 deletion packages/skiyee-uni-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@skiyee/uni-ui",
"type": "module",
"version": "1.1.0",
"version": "1.1.1",
"description": "一个由原子化CSS驱动、符合直觉设计、高度定制化、面向AI时代的移动端 UI 库，助力开发者打造独特且差异化的移动端应用程序",
"author": {
"name": "skiyee",
Expand Down
Loading