130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const props = defineProps({
|
||
/** 详情 id（由路由参数经工厂注入，保证每个 fullPath 拿到自己的 id） */
|
||
id: { type: [String, Number], default: '' },
|
||
})
|
||
|
||
// 下面这个输入框用于验证「缓存按 fullPath 隔离」：
|
||
// 在同一参数页输入内容后切换/关闭再回来，值应保留；不同参数之间互不影响。
|
||
const draft = ref('')
|
||
const counter = ref(0)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="detail-page">
|
||
<h1 class="detail-title">详情页 #{{ id }}</h1>
|
||
<p class="detail-sub">
|
||
当前路由：<code>{{ $route.fullPath }}</code>
|
||
</p>
|
||
|
||
<div class="detail-card">
|
||
<p class="detail-hint">
|
||
本页每个 <code>id</code> 是<strong>独立缓存</strong>：切换 / 关闭后再回到相同
|
||
<code>id</code>，下方输入内容与计数会保留；不同 <code>id</code> 之间互不影响。
|
||
</p>
|
||
|
||
<label class="detail-field">
|
||
<span>测试输入（验证缓存隔离）</span>
|
||
<input v-model="draft" class="detail-input" placeholder="输入点什么，再切换页签回来看看" />
|
||
</label>
|
||
|
||
<div class="detail-row">
|
||
<Button type="primary" @click="counter += 1">计数 +1（当前 {{ counter }}）</Button>
|
||
<span class="detail-tip">关闭本页签再重开，计数归零说明缓存已销毁；保留说明命中缓存。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
color: var(--fms-text);
|
||
}
|
||
|
||
.detail-title {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-sub {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: var(--fms-text-secondary);
|
||
|
||
code {
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
background: var(--fms-secondary-hover);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.detail-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding: 16px;
|
||
border: 1px solid var(--fms-border);
|
||
border-radius: var(--fms-control-radius);
|
||
background: var(--fms-card);
|
||
}
|
||
|
||
.detail-hint {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
color: var(--fms-text-secondary);
|
||
|
||
code {
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
background: var(--fms-secondary-hover);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.detail-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
color: var(--fms-text-secondary);
|
||
}
|
||
|
||
.detail-input {
|
||
width: 320px;
|
||
max-width: 100%;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
border: 1px solid var(--fms-border);
|
||
border-radius: var(--fms-control-radius);
|
||
background: var(--fms-background);
|
||
color: var(--fms-text);
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
|
||
&:focus {
|
||
outline: 2px solid var(--fms-primary);
|
||
outline-offset: -2px;
|
||
}
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.detail-tip {
|
||
font-size: 12px;
|
||
color: var(--fms-text-secondary);
|
||
}
|
||
</style>
|