refactor editor

examples/Root.vue

@@ -1,21 +1,97 @@
 <template>
-	<user-profile-popup />
+	<div class="demo-app">
+		<header class="hero">
+			<div>
+				<p class="eyebrow">timi-tdesign-pc</p>
+				<h1>PC 端组件演示台</h1>
+				<p>用固定数据覆盖编辑器、文章和通知的完整交互链路。</p>
+			</div>
+			<t-tag theme="primary" variant="light">TDesign Vue Next</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 />
+		</main>
+	</div>
+	<popup />
 </template>
 
 <script lang="ts" setup>
+import ArticleShowcase from "./components/ArticleShowcase.vue";
+import EditorShowcase from "./components/EditorShowcase.vue";
+import NotifyShowcase from "./components/NotifyShowcase.vue";
 import { Popup } from "timi-web";
-import { UserProfilePopup } from "~/components";
 
-const isReady = ref(false);
+type TabValue = "editor" | "article" | "notify";
 
-onMounted(async () => {
-	isReady.value = true;
-});
+const tabs: Array<{ label: string; value: TabValue }> = [
+	{ label: "编辑器", value: "editor" },
+	{ label: "文章", value: "article" },
+	{ label: "通知", value: "notify" }
+];
+const activeTab = ref<TabValue>("editor");
 </script>
 
 <style lang="less" scoped>
-.test {
-	width: 20rem;
-	margin: 2rem auto;
+.demo-app {
+	width: min(100% - 3rem, 96rem);
+	min-height: 100vh;
+	margin: 0 auto;
+	padding: 3rem 0 5rem;
+	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(2rem, 4vw, 3.5rem);
+	}
+
+	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;
+}
+
+@media (max-width: 48rem) {
+	.demo-app {
+		width: min(100% - 1rem, 96rem);
+		padding-top: 1.5rem;
+	}
+
+	.hero {
+		flex-direction: column;
+	}
 }
 </style>