add vitepress docs

2026-09-21 16:05:14 +08:00
parent b435bf992e
commit 37cf38fe27
73 changed files with 7003 additions and 802 deletions
@@ -0,0 +1,131 @@
+<template>
+	<div class="demo">
+		<div class="card">
+			<t-cell title="缓存有效期" arrow @click="pickerVisible = true">
+				<span v-text="humanized" />
+			</t-cell>
+		</div>
+
+		<div class="bar">
+			<button type="button" class="btn" @click="sheetVisible = true" v-text="'打开底部弹层'" />
+		</div>
+
+		<p class="status" v-text="`弹层最近一次操作：${lastAction}`" />
+
+		<space size="small" class="tags">
+			<span v-for="item in 3" :key="item" class="tag" v-text="`标签 ${item}`" />
+		</space>
+
+		<t-popup v-model="pickerVisible" placement="bottom" destroy-on-close>
+			<div class="picker-panel">
+				<duration-picker v-model="durationMs" @change="pickerVisible = false" />
+			</div>
+		</t-popup>
+
+		<bottom-popup
+			v-model="sheetVisible"
+			title="选择操作"
+			@left-button-click="onAction('取消')"
+			@right-button-click="onAction('确定')"
+		>
+			<div class="sheet-content">
+				<p v-text="'底部弹层适合承载一组操作或一段简短表单。'" />
+			</div>
+		</bottom-popup>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { BottomPopup, DurationPicker, Space } from "timi-tdesign-mobile";
+
+/**
+ * 本场景是移动端最典型的两种浮现方式：整块选择面板用 `t-popup` 从底部升起，
+ * 操作确认用 BottomPopup。
+ */
+const durationMs = ref(1000);
+const pickerVisible = ref(false);
+const sheetVisible = ref(false);
+const lastAction = ref("无");
+
+/** 把毫秒换算成便于阅读的形式。 */
+const humanized = computed(() => {
+	const value = durationMs.value;
+	if (value % (60 * 60 * 1000) === 0) {
+		return `${value / (60 * 60 * 1000)} 小时`;
+	}
+	if (value % (60 * 1000) === 0) {
+		return `${value / (60 * 1000)} 分钟`;
+	}
+	if (value % 1000 === 0) {
+		return `${value / 1000} 秒`;
+	}
+	return `${value} 毫秒`;
+});
+
+function onAction(action: string) {
+	lastAction.value = action;
+	sheetVisible.value = false;
+}
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.card {
+		overflow: hidden;
+		margin-bottom: .75rem;
+		border: 1px solid var(--vp-c-divider);
+		border-radius: .5rem;
+	}
+
+	.bar {
+		margin-bottom: .75rem;
+	}
+
+	.btn {
+		width: 100%;
+		padding: .5rem;
+		font-size: .8125rem;
+		cursor: pointer;
+		border: none;
+		border-radius: .5rem;
+		color: #fff;
+		background: var(--vp-c-brand-1);
+	}
+
+	.status {
+		margin: 0 0 .75rem;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+
+	.tags {
+		margin-bottom: 0;
+	}
+
+	.tag {
+		padding: .25rem .5rem;
+		font-size: .6875rem;
+		border-radius: .25rem;
+		color: var(--vp-c-brand-1);
+		background: var(--vp-c-default-soft);
+	}
+
+	.picker-panel {
+		padding-top: .5rem;
+		border-radius: 1rem 1rem 0 0;
+		background: var(--vp-c-bg);
+	}
+
+	.sheet-content {
+		padding: 1rem;
+
+		p {
+			margin: 0;
+			font-size: .8125rem;
+			line-height: 1.6;
+			color: var(--vp-c-text-2);
+		}
+	}
+}
+</style>