20260817225227

2026-08-17 22:52:27 +08:00
1 parent d3acc7d28f
commit b90ae89b0e
@@ -0,0 +1,129 @@
+<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>