add vitepress docs

docs/demos/ai-chat-thinking/basic.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="demo">
+		<ai-chat-thinking :content="content" :is-generating="generating" />
+
+		<div class="bar">
+			<button type="button" class="btn" :disabled="generating" @click="start" v-text="'开始生成'" />
+			<button type="button" class="btn" @click="reset" v-text="'重置'" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref } from "vue";
+import { AiChatThinking } from "timi-tdesign-mobile";
+
+const SEGMENTS = [
+	"先理解问题：用户想知道上个月的订单情况。",
+	"确认时间范围：按自然月还是滚动 30 天？这里取自然月。",
+	"确认口径：使用支付口径而非下单口径。",
+	"开始查询数据并汇总……"
+];
+
+const content = ref("");
+const generating = ref(false);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+/** 逐段追加，模拟思考内容流式到达；生成中组件会自动滚到底部。 */
+function start() {
+	reset();
+	generating.value = true;
+	let index = 0;
+	timer = setInterval(() => {
+		if (index >= SEGMENTS.length) {
+			stop();
+			return;
+		}
+		content.value += (content.value ? "\n" : "") + SEGMENTS[index];
+		index += 1;
+	}, 700);
+}
+
+function stop() {
+	if (timer !== null) {
+		clearInterval(timer);
+		timer = null;
+	}
+	generating.value = false;
+}
+
+function reset() {
+	stop();
+	content.value = "";
+}
+
+onUnmounted(stop);
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.bar {
+		display: flex;
+		gap: .5rem;
+		margin-top: .75rem;
+	}
+
+	.btn {
+		padding: .25rem .75rem;
+		font-size: .75rem;
+		cursor: pointer;
+		border: 1px solid var(--vp-c-divider);
+		border-radius: .375rem;
+		color: var(--vp-c-text-1);
+		background: var(--vp-c-bg-soft);
+
+		&:hover:not(:disabled) {
+			color: var(--vp-c-brand-1);
+			border-color: var(--vp-c-brand-1);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			opacity: .5;
+		}
+	}
+}
+</style>