98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<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";
|
|
|
|
type TabValue = "editor" | "article" | "notify";
|
|
|
|
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>
|
|
.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>
|