add vitepress docs

docs/demos/duration-picker/basic.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="demo">
+		<duration-picker v-model="duration" @change="onChange" />
+
+		<div class="result">
+			<p class="value" v-text="`${duration} ms`" />
+			<p class="text" v-text="humanized" />
+			<p class="text" v-text="`变更次数：${changeCount}`" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { DurationPicker } from "timi-tdesign-mobile";
+
+const duration = ref(1000);
+const changeCount = ref(0);
+
+/** 把毫秒换算成便于阅读的形式，仅用于演示展示。 */
+const humanized = computed(() => {
+	const value = duration.value;
+	if (value < 1000) {
+		return `${value} 毫秒`;
+	}
+	if (value < 60_000) {
+		return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 2)} 秒`;
+	}
+	if (value < 3600_000) {
+		return `${(value / 60_000).toFixed(2)} 分钟`;
+	}
+	if (value < 86400_000) {
+		return `${(value / 3600_000).toFixed(2)} 小时`;
+	}
+	return `${(value / 86400_000).toFixed(2)} 天`;
+});
+
+function onChange() {
+	changeCount.value += 1;
+}
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.result {
+		margin-top: 1rem;
+		text-align: center;
+	}
+
+	.value {
+		margin: 0 0 .25rem;
+		font-size: 1.125rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		color: var(--vp-c-brand-1);
+	}
+
+	.text {
+		margin: 0 0 .25rem;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>