refactor editor

examples/components/DurationShowcase.vue

@@ -0,0 +1,88 @@
+<template>
+	<section class="demo-section">
+		<div class="section-heading">
+			<div>
+				<p class="eyebrow">移动端专属</p>
+				<h2>DurationPicker</h2>
+				<p>验证 Picker 交互和毫秒值双向转换。</p>
+			</div>
+			<span class="value" v-text="`${durationMs} ms`" />
+		</div>
+		<div class="demo-card">
+			<t-cell title="当前毫秒值" arrow @click="visible = true">
+				<span v-text="formatDuration(durationMs)" />
+			</t-cell>
+		</div>
+		<t-popup v-model="visible" placement="bottom" destroy-on-close>
+			<div class="picker-panel">
+				<duration-picker v-model="durationMs" @change="visible = false" />
+			</div>
+		</t-popup>
+	</section>
+</template>
+
+<script lang="ts" setup>
+import { DurationPicker } from "timi-tdesign-mobile";
+
+const visible = ref(false);
+const durationMs = ref(1000);
+
+function formatDuration(value: number) {
+	if (60 * 60 * 1000 <= value && value % (60 * 60 * 1000) === 0) {
+		return `${value / (60 * 60 * 1000)} 小时`;
+	}
+	if (60 * 1000 <= value && value % (60 * 1000) === 0) {
+		return `${value / (60 * 1000)} 分钟`;
+	}
+	if (1000 <= value && value % 1000 === 0) {
+		return `${value / 1000} 秒`;
+	}
+	return `${value} 毫秒`;
+}
+</script>
+
+<style lang="less" scoped>
+.demo-section {
+	.section-heading {
+		align-items: flex-end;
+		display: flex;
+		gap: 1rem;
+		justify-content: space-between;
+		margin-bottom: 1rem;
+
+		h2 {
+			margin: .25rem 0;
+		}
+
+		p {
+			margin: 0;
+			color: var(--td-text-color-secondary);
+		}
+	}
+
+	.eyebrow {
+		font-size: .75rem;
+		letter-spacing: .08em;
+		text-transform: uppercase;
+		color: var(--td-brand-color);
+	}
+
+	.value {
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+
+	.demo-card {
+		padding: .25rem;
+		border: 1px solid var(--td-component-border);
+		border-radius: .75rem;
+		background: var(--td-bg-color-container);
+	}
+
+	.picker-panel {
+		padding-top: .5rem;
+		border-radius: 1rem 1rem 0 0;
+		background: var(--td-bg-color-container);
+	}
+}
+</style>