Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 1x 1x | <script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({ name: 'TestPage' })
import Button from '@/components/ui/button/button.vue'
const route = useRoute()
const title = computed(() => route.meta?.title ?? '测试页')
const desc = computed(() => route.meta?.desc ?? '')
const index = computed(() => Number(route.params.id ?? 0))
</script>
<template>
<div class="fms-test-page">
<header class="fms-test-page__head">
<h1>{{ title }}</h1>
<p v-if="desc">{{ desc }}</p>
</header>
<div class="fms-test-page__body">
<div class="fms-test-page__card">
<p>这是用于测试 Tabs 导航的占位页面。</p>
<p>
当前路由：<code>{{ route.fullPath }}</code>
</p>
<p>
页签索引：<strong>{{ index }}</strong>
</p>
</div>
<div class="fms-test-page__actions">
<Button type="primary" @click="$router.push(`/test/${index + 1}`)">
前往下一个测试页 ({{ index + 1 }})
</Button>
<Button @click="$router.push('/dashboard')">回到工作台</Button>
</div>
</div>
</div>
</template>
<style scoped>
.fms-test-page {
padding: 16px;
}
.fms-test-page__head h1 {
margin: 0 0 4px;
font-size: 18px;
font-weight: 600;
}
.fms-test-page__head p {
margin: 0;
color: var(--fms-text-secondary);
font-size: 13px;
}
.fms-test-page__body {
margin-top: 16px;
}
.fms-test-page__card {
padding: 16px;
border: 1px solid var(--fms-border);
border-radius: var(--fms-control-radius);
background: var(--fms-card);
font-size: 13px;
line-height: 1.8;
}
.fms-test-page__card code {
padding: 1px 6px;
border-radius: 4px;
background: var(--fms-background);
}
.fms-test-page__actions {
display: flex;
gap: 8px;
margin-top: 16px;
}
</style>
|