All files / src/views/detail DetailPage.vue

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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>