refactor editor

examples/Root.vue

@@ -1,21 +1,102 @@
 <template>
-	<div class="root">
-		<t-cell-group title="测试 cell" theme="card">
-			<t-cell title="title" arrow>测试</t-cell>
-			<t-cell title="title" arrow>测试</t-cell>
-			<t-cell title="title" arrow>测试</t-cell>
-			<t-cell title="title" arrow>测试</t-cell>
-		</t-cell-group>
-		<t-button theme="primary">按钮</t-button>
+	<div class="demo-app">
+		<header class="hero">
+			<div>
+				<p class="eyebrow">timi-tdesign-mobile</p>
+				<h1>移动端组件演示台</h1>
+				<p>每个页面都使用真实公开组件和可重复的本地演示数据。</p>
+			</div>
+			<t-tag theme="primary" variant="light">TDesign Mobile</t-tag>
+		</header>
+
+		<nav class="tabs" aria-label="演示分类">
+			<t-button
+				v-for="item in tabs"
+				:key="item.value"
+				size="small"
+				:theme="activeTab === item.value ? 'primary' : 'default'"
+				variant="outline"
+				@click="activeTab = item.value"
+				v-text="item.label"
+			/>
+		</nav>
+
+		<main>
+			<editor-showcase v-if="activeTab === 'editor'" />
+			<article-showcase v-else-if="activeTab === 'article'" />
+			<notify-showcase v-else-if="activeTab === 'notify'" />
+			<duration-showcase v-else />
+		</main>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import ArticleShowcase from "./components/ArticleShowcase.vue";
+import DurationShowcase from "./components/DurationShowcase.vue";
+import EditorShowcase from "./components/EditorShowcase.vue";
+import NotifyShowcase from "./components/NotifyShowcase.vue";
+
+type TabValue = "editor" | "article" | "notify" | "duration";
+
+const tabs: Array<{ label: string; value: TabValue }> = [
+	{ label: "编辑器", value: "editor" },
+	{ label: "文章", value: "article" },
+	{ label: "通知", value: "notify" },
+	{ label: "移动端组件", value: "duration" }
+];
+const activeTab = ref<TabValue>("editor");
 </script>
 
 <style lang="less" scoped>
-.root {
-	width: 100%;
-	background: lightgray;
+.demo-app {
+	width: min(100% - 2rem, 80rem);
+	min-height: 100vh;
+	margin: 0 auto;
+	padding: 2rem 0 4rem;
+	color: var(--td-text-color-primary);
+}
+
+.hero {
+	align-items: flex-start;
+	display: flex;
+	gap: 1rem;
+	justify-content: space-between;
+	margin-bottom: 1.5rem;
+
+	h1 {
+	margin: .25rem 0;
+	font-size: clamp(1.75rem, 6vw, 3rem);
+	}
+
+	p {
+	margin: 0;
+	color: var(--td-text-color-secondary);
+	}
+}
+
+.eyebrow {
+	font-size: .75rem;
+	letter-spacing: .08em;
+	text-transform: uppercase;
+	color: var(--td-brand-color);
+}
+
+.tabs {
+	display: flex;
+	gap: .5rem;
+	margin-bottom: 1.5rem;
+	overflow-x: auto;
+	padding-bottom: .25rem;
+}
+
+@media (max-width: 40rem) {
+	.demo-app {
+		width: min(100% - 1rem, 80rem);
+		padding-top: 1rem;
+	}
+
+	.hero {
+		flex-direction: column;
+	}
 }
 </style>