diff --git a/src/router/enums.ts b/src/router/enums.ts
index ae281674c..decfe0e60 100644
--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@@ -5,8 +5,8 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
   utils = 2,
   table = 3,
   tree = 4,
-  able = 5,
-  components = 6,
+  components = 5,
+  able = 6,
   frame = 7,
   nested = 8,
   result = 9,
@@ -28,8 +28,8 @@ export {
   utils,
   table,
   tree,
-  able,
   components,
+  able,
   frame,
   nested,
   result,
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 43b880c7c..1b2ea9f9d 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -19,6 +19,10 @@ export default {
         extraIcon: {
           svg: true,
           name: "team-iconxinpinrenqiwang"
+        },
+        transition: {
+          enterTransition: "animate__fadeInLeft",
+          leaveTransition: "animate__fadeOutRight"
         }
       }
     },
diff --git a/src/views/components/message/index.vue b/src/views/components/message/index.vue
index 23c330d3a..72178adc0 100644
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@@ -19,7 +19,7 @@ defineOptions({
 
     <h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
 
-    <el-space>
+    <el-space wrap>
       <el-button
         type="info"
         @click="message('Info类型消息', { customClass: 'el' })"
@@ -119,7 +119,7 @@ defineOptions({
       原本样式，使用和打包大小成本极低并适配暗黑模式）
     </h4>
 
-    <el-space>
+    <el-space wrap>
       <el-button type="info" @click="message('Info类型消息')">Info</el-button>
       <el-button
         type="success"
diff --git a/src/views/pure-table/index.vue b/src/views/pure-table/index.vue
index dcf3716c1..d8d4830bb 100644
--- a/src/views/pure-table/index.vue
+++ b/src/views/pure-table/index.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { list } from "./base/list";
 
 defineOptions({
   name: "PureTable"
 });
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
 </script>
 
 <template>
@@ -32,9 +39,9 @@ defineOptions({
       :closable="false"
     />
 
-    <el-tabs>
+    <el-tabs @tab-click="tabClick">
       <template v-for="(item, index) of list" :key="item.key">
-        <el-tab-pane>
+        <el-tab-pane :lazy="true">
           <template #label>
             <el-tooltip
               :content="`（第 ${index + 1} 个示例）${item.content}`"
@@ -43,7 +50,7 @@ defineOptions({
               <span>{{ item.title }}</span>
             </el-tooltip>
           </template>
-          <component :is="item.component" />
+          <component v-if="selected == index" :is="item.component" />
         </el-tab-pane>
       </template>
     </el-tabs>
diff --git a/types/global.d.ts b/types/global.d.ts
index ffe427bf9..cbf77377d 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -214,6 +214,7 @@ declare global {
         /**
          * @description 当前路由动画效果
          * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
+         * @see animate.css {@link https://animate.style}
          */
         name?: string;
         /** 进场动画 */