From d118e5d36cdb74832c76d8bf2ad79379d7ab2dc7 Mon Sep 17 00:00:00 2001
From: yll <2712495353@qq.com>
Date: Fri, 30 May 2025 00:25:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A4=BA=E4=BE=8B=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlertBox.vue | 15 +++++++++++++++
 src/views/TestView.vue      | 27 +++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/components/AlertBox.vue

diff --git a/src/components/AlertBox.vue b/src/components/AlertBox.vue
new file mode 100644
index 0000000..c4d9490
--- /dev/null
+++ b/src/components/AlertBox.vue
@@ -0,0 +1,15 @@
+<script setup>
+</script>
+
+<template>
+<div class="alert-box">
+    <strong>This is an Error for Demo Purposes</strong>
+    <slot />
+</div>
+</template>
+
+<style scoped>
+.alert-box {
+    color: red;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index e1b1eab..7f4e867 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -2,6 +2,9 @@
 import { ref } from 'vue'
 import ButtonCounter from '@/components/ButtonCounter.vue'
 import BlogPost from '@/components/BlogPost.vue'
+import AlertBox from '@/components/AlertBox.vue'
+import HomeView from './HomeView.vue'
+import GameView from './GameView.vue'
 
 const posts = ref([
   { id: 1, title: 'test01' },
@@ -10,6 +13,14 @@ const posts = ref([
 ])
 
 const postFontSize = ref(1)
+
+const currentTab = ref('HomeView')
+
+const tabs = {
+  HomeView,
+  GameView
+}
+
 </script>
 
 <template>
@@ -25,6 +36,22 @@ const postFontSize = ref(1)
       @enlarge-text="postFontSize += 0.1"
     ></BlogPost>
   </div>
+
+  <AlertBox>
+    test
+  </AlertBox>
+
+  <div class="demo">
+    <button
+    v-for="(_, tab) in tabs"
+    :key="tab"
+    @click="currentTab = tab">
+      {{ tab }} 
+    </button>
+    <KeepAlive>
+      <component :is="tabs[currentTab]" />
+    </KeepAlive>
+  </div>
 </template>
 
 <style scoped></style>