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,93 @@
+<template>
+	<div class="demo">
+		<div class="bar">
+			<button type="button" class="btn" @click="submit" v-text="'提交'" />
+			<button type="button" class="btn" @click="openSearch" v-text="'打开查找'" />
+		</div>
+
+		<div class="box">
+			<tiptap-editor
+				ref="editorRef"
+				v-model="content"
+				:upload-image="uploadMedia"
+				:upload-video="uploadMedia"
+				@change="onChange"
+			/>
+		</div>
+
+		<p class="status" v-text="status" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TiptapEditor } from "timi-tdesign-mobile";
+import type { TiptapEditorExpose, UploadResult } from "timi-tdesign-mobile";
+
+const content = ref(`<h2>富文本编辑器</h2>
+<p>工具栏覆盖标题、颜色、列表、表格、链接与代码块。</p>
+<blockquote><p>移动端工具栏会自动换行排列。</p></blockquote>`);
+
+const status = ref("等待操作");
+const editorRef = ref<TiptapEditorExpose>();
+
+function onChange(value: string) {
+	status.value = `内容已更新，${value.length} 个字符`;
+}
+
+async function submit() {
+	const value = await editorRef.value?.submit();
+	if (value !== undefined) {
+		content.value = value;
+		status.value = `已提交，${value.length} 个字符`;
+	}
+}
+
+function openSearch() {
+	editorRef.value?.openSearch(true);
+}
+
+/** 演示用上传：直接把本地文件转成临时地址，无需后端。 */
+async function uploadMedia(file: File): Promise<UploadResult> {
+	return {
+		id: `demo-${Date.now()}-${file.name}`,
+		name: file.name,
+		url: URL.createObjectURL(file)
+	};
+}
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.bar {
+		display: flex;
+		gap: .5rem;
+		margin-bottom: .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 {
+			color: var(--vp-c-brand-1);
+			border-color: var(--vp-c-brand-1);
+		}
+	}
+
+	.box {
+		height: 24rem;
+	}
+
+	.status {
+		margin: .75rem 0 0;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>