u

code/g3soft-erp/web/src/views/system/KeepAliveTest.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+
+/**
+ * keep-alive 测试页（临时）。
+ * 输入内容后切换到别的页签再回来，输入应保留；双击页签或点「刷新」应清空。
+ * 验证通过后删除本页与对应路由 / 菜单项。
+ */
+defineOptions({ name: 'KeepAliveTest' })
+
+const text = ref('')
+const count = ref(0)
+
+// 生命周期探针：确认 KeepAlive 是否真的在渲染树里包裹本组件
+const events = ref<string[]>([])
+onMounted(() => events.value.push('mounted'))
+onUnmounted(() => events.value.push('unmounted'))
+onActivated(() => events.value.push('activated'))
+onDeactivated(() => events.value.push('deactivated'))
+</script>
+
+<template>
+  <div class="keepalive-test">
+    <h2>keep-alive 测试页</h2>
+    <p class="keepalive-test__tip">
+      在输入框输入内容 → 切到其它页签 → 切回来，内容应保留。<br />
+      双击页签或点页签栏「刷新」，内容应清空。
+    </p>
+
+    <input v-model="text" class="keepalive-test__input" placeholder="输入点内容测试缓存" />
+
+    <p>输入内容：<strong>{{ text || '（空）' }}</strong></p>
+
+    <button class="keepalive-test__btn" @click="count += 1">
+      点击计数：{{ count }}
+    </button>
+    <p>切页签回来，计数应保留（当前 {{ count }}）</p>
+
+    <p class="keepalive-test__events">生命周期事件：{{ events.join(' → ') || '（无）' }}</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.keepalive-test {
+  padding: 24px;
+  background: var(--g3-color-bg-container, #fff);
+  border: 1px solid var(--g3-color-border, #e5e6eb);
+  border-radius: 8px;
+
+  &__tip {
+    font-size: 13px;
+    line-height: 1.8;
+    color: var(--g3-color-text-secondary, #4e5969);
+  }
+
+  &__input {
+    width: 280px;
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid var(--g3-color-border, #e5e6eb);
+    border-radius: 6px;
+    font-size: 14px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--g3-color-primary, #165dff);
+    }
+  }
+
+  &__btn {
+    height: 32px;
+    padding: 0 16px;
+    color: #fff;
+    cursor: pointer;
+    background: var(--g3-color-primary, #165dff);
+    border: 0;
+    border-radius: 6px;
+  }
+}
+</style>