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,165 @@
+<template>
+	<div class="demo">
+		<div class="tabs">
+			<button
+				v-for="item in tabList"
+				:key="item.value"
+				type="button"
+				class="tab"
+				:class="{ active: tab === item.value }"
+				@click="tab = item.value"
+				v-text="item.label"
+			/>
+		</div>
+
+		<section v-show="tab === 'rich'" class="pane">
+			<div class="bar">
+				<button type="button" class="btn" @click="submitRich" v-text="'提交富文本'" />
+				<button type="button" class="btn" @click="openSearch" v-text="'打开查找'" />
+			</div>
+			<div class="box tall">
+				<tiptap-editor
+					ref="tiptapRef"
+					v-model="rich"
+					:upload-image="uploadMedia"
+					:upload-video="uploadMedia"
+					@change="onRichChange"
+				/>
+			</div>
+			<p class="status" v-text="status" />
+		</section>
+
+		<section v-show="tab === 'view'" class="pane">
+			<tiptap-view :content="rich" max-height="20rem" />
+		</section>
+
+		<section v-show="tab === 'code'" class="pane">
+			<div class="bar">
+				<button type="button" class="btn" @click="resetCode" v-text="'恢复示例'" />
+			</div>
+			<div class="box">
+				<code-editor v-model="code" language="typescript" placeholder="请输入代码" />
+			</div>
+		</section>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { CodeEditor, TiptapEditor, TiptapView } from "timi-tdesign-mobile";
+import type { TiptapEditorExpose, UploadResult } from "timi-tdesign-mobile";
+
+/** 本场景把三类编辑器收在一个页面里，用标签切换而不是并排——移动端宽度放不下分栏。 */
+const DEMO_CODE = `type DemoUser = {
+	id: string;
+	name: string;
+};
+
+const user: DemoUser = { id: "u1", name: "Timi" };`;
+
+const tabList = [
+	{ label: "富文本", value: "rich" },
+	{ label: "只读视图", value: "view" },
+	{ label: "代码", value: "code" }
+];
+
+const tab = ref("rich");
+const rich = ref(`<h2>跨平台编辑器</h2>
+<p>这段内容同时验证标题、段落、引用与代码块的渲染。</p>
+<blockquote><p>移动端和 PC 端只替换交互层，共享文档模型。</p></blockquote>`);
+const code = ref(DEMO_CODE);
+const status = ref("等待操作");
+const tiptapRef = ref<TiptapEditorExpose>();
+
+function onRichChange(value: string) {
+	status.value = `内容已更新，${value.length} 个字符`;
+}
+
+function resetCode() {
+	code.value = DEMO_CODE;
+}
+
+async function submitRich() {
+	const value = await tiptapRef.value?.submit();
+	if (value !== undefined) {
+		rich.value = value;
+		status.value = `已提交，${value.length} 个字符`;
+	}
+}
+
+function openSearch() {
+	tiptapRef.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 {
+	.tabs {
+		display: flex;
+		gap: .25rem;
+		padding: .25rem;
+		margin-bottom: .75rem;
+		border-radius: .5rem;
+		background: var(--vp-c-bg-soft);
+	}
+
+	.tab {
+		flex: 1;
+		padding: .375rem;
+		font-size: .75rem;
+		cursor: pointer;
+		border: none;
+		border-radius: .375rem;
+		color: var(--vp-c-text-2);
+		background: transparent;
+
+		&.active {
+			color: var(--vp-c-brand-1);
+			background: var(--vp-c-bg);
+		}
+	}
+
+	.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: 16rem;
+	}
+
+	.tall {
+		height: 22rem;
+	}
+
+	.status {
+		margin: .75rem 0 0;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>