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

@@ -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">
+          <Transition name="slide">
-            <RouterLink
+            <div v-if="isExpanded(menu.key)" class="sub-nav">
-              v-for="child in menu.children"
+              <RouterLink
-              :key="child.path"
+                v-for="child in menu.children"
-              :to="child.path"
+                :key="child.path"
-              class="sub-nav-item"
+                :to="child.path"
-              active-class="active"
+                class="sub-nav-item"
-            >
+                active-class="active"
-              {{ child.title }}
+              >
-            </RouterLink>
+                {{ child.title }}
-          </div>
+              </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 {