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,125 @@
+<template>
+	<div class="demo">
+		<div class="phone">
+			<header class="head">
+				<span class="title" v-text="'智能助手'" />
+				<button type="button" class="reset" @click="resetConversation" v-text="'清空'" />
+			</header>
+
+			<ai-chat-panel
+				class="panel"
+				:messages="messages"
+				:is-generating="isGenerating"
+				:active-tool-status="activeToolStatus"
+				:last-error="lastError"
+				:can-retry="canRetry"
+				:loading="isLoadingConversation"
+				:role-names="{ assistant: '分析助手', user: '我' }"
+				@send="sendMessage"
+				@stop="stopGeneration"
+				@retry="retryLastMessage"
+			>
+				<template #welcome>
+					<div class="welcome">
+						<p class="welcome-title" v-text="'可以问我关于数据的问题'" />
+						<p class="welcome-tip" v-text="'例如：上个月订单量怎么样？'" />
+					</div>
+				</template>
+			</ai-chat-panel>
+		</div>
+
+		<p class="note" v-text="'面板嵌在带标题栏的页面骨架里，欢迎语与角色名都做了自定义。'" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { AiChatPanel, useAiChat } from "timi-tdesign-mobile";
+import { createMockReply } from "../ai/mock-sse";
+
+/**
+ * 完整场景：标题栏 + 面板 + 自定义欢迎语。
+ * 会话状态全部来自 useAiChat，真实项目里把 request 换成后端 SSE 接口即可。
+ */
+const {
+	messages,
+	isGenerating,
+	isLoadingConversation,
+	activeToolStatus,
+	lastError,
+	canRetry,
+	sendMessage,
+	stopGeneration,
+	retryLastMessage,
+	resetConversation
+} = useAiChat({
+	request: async ({ message, signal }) => createMockReply(message, signal)
+});
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.phone {
+		height: 32rem;
+		display: flex;
+		overflow: hidden;
+		flex-direction: column;
+		border: 1px solid var(--vp-c-divider);
+		border-radius: .5rem;
+		background: var(--vp-c-bg-soft);
+	}
+
+	.head {
+		display: flex;
+		flex: none;
+		align-items: center;
+		justify-content: space-between;
+		padding: .625rem .75rem;
+		border-bottom: 1px solid var(--vp-c-divider);
+		background: var(--vp-c-bg);
+	}
+
+	.title {
+		font-size: .875rem;
+		font-weight: 600;
+	}
+
+	.reset {
+		padding: .25rem .5rem;
+		font-size: .75rem;
+		cursor: pointer;
+		border: 1px solid var(--vp-c-divider);
+		border-radius: .375rem;
+		color: var(--vp-c-text-2);
+		background: transparent;
+	}
+
+	.panel {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.welcome {
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+
+	.welcome-title {
+		margin: 0 0 .375rem;
+		font-size: .875rem;
+		font-weight: 600;
+		color: var(--vp-c-text-1);
+	}
+
+	.welcome-tip {
+		margin: 0;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+
+	.note {
+		margin: .75rem 0 0;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>