From 7309a5c9ab62b546df63e5f1eb93ff4eff79230c Mon Sep 17 00:00:00 2001
From: wangran <3189505710@qq.com>
Date: Sat, 10 Jan 2026 16:29:19 +0800
Subject: [PATCH] Enhance App.vue with transition effects and global styles:
 add slide transition for sub-navigation, implement global style resets, and
 improve layout responsiveness.

---
 src/App.vue | 95 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 84 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c150113..d6a8cba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,17 +113,19 @@ const toggleExpand = (key: string) => {
             <span>{{ menu.title }}</span>
             <span class="arrow" :class="{ open: isExpanded(menu.key) }">▾</span>
           </div>
-          <div v-if="isExpanded(menu.key)" class="sub-nav">
-            <RouterLink
-              v-for="child in menu.children"
-              :key="child.path"
-              :to="child.path"
-              class="sub-nav-item"
-              active-class="active"
-            >
-              {{ child.title }}
-            </RouterLink>
-          </div>
+          <Transition name="slide">
+            <div v-if="isExpanded(menu.key)" class="sub-nav">
+              <RouterLink
+                v-for="child in menu.children"
+                :key="child.path"
+                :to="child.path"
+                class="sub-nav-item"
+                active-class="active"
+              >
+                {{ child.title }}
+              </RouterLink>
+            </div>
+          </Transition>
         </div>
       </nav>
     </aside>
@@ -139,10 +141,37 @@ const toggleExpand = (key: string) => {
   </div>
 </template>
 
+<style>
+/* 全局样式重置，移除页面与屏幕边缘的间隔 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+</style>
+
 <style scoped>
 .layout {
   display: flex;
   height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
   background: #f5f7fa;
   color: #333;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
@@ -174,6 +203,16 @@ const toggleExpand = (key: string) => {
   margin-top: 12px;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* 隐藏滚动条但保持滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 和 Edge */
+}
+
+.nav::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .nav-item {
@@ -208,6 +247,40 @@ const toggleExpand = (key: string) => {
 .sub-nav {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+
+/* 子导航展开/收起动画 */
+.slide-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-10px);
+}
+
+.slide-enter-to {
+  opacity: 1;
+  max-height: 500px;
+  transform: translateY(0);
+}
+
+.slide-leave-from {
+  opacity: 1;
+  max-height: 500px;
+  transform: translateY(0);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-10px);
 }
 
 .sub-nav-item {