U:调整部分报错以及页面展示

src/argus/src/assets/var.css

@@ -2,7 +2,7 @@
 :root {
   /* 布局尺寸变量 */
   --header-height: 64px;
-  --sidebar-width: 290px;
+  --sidebar-width: 220px;
   --sidebar-collapsed-width: 64px;
   
   /* 间距变量 */

src/argus/src/components/Layout/AppLayout.vue

@@ -8,7 +8,6 @@
           <n-icon size="32" class="logo-icon">
             <img src="@/assets/logo.svg" alt="logo" />
           </n-icon>
-          <!-- 使用 v-show 避免折叠时文字换行导致的跳动 -->
           <span class="site-title" v-show="!collapsed">Argus</span>
         </router-link>
 
@@ -36,14 +35,14 @@
     </header>
 
     <!-- 主体布局 (Flex Container) -->
-    <div class="app-body">
+    <!-- 改回 n-layout 以满足 n-layout-sider 的依赖，但强制使用 flex 布局 -->
+    <n-layout has-sider class="app-body">
       <!-- 左侧导航栏 -->
-      <!-- 注意：这里保留 n-layout-sider 是为了利用它的折叠动画和样式 -->
       <n-layout-sider
         bordered
         collapse-mode="width"
         :collapsed-width="64"
-        :width="290"
+        :width="220"
         :native-scrollbar="false"
         class="app-sider"
         v-model:collapsed="collapsed"
@@ -67,14 +66,14 @@
           <router-view />
         </div>
       </main>
-    </div>
+    </n-layout>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch, computed, h, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { NMenu, NIcon, NLayoutSider, NInput } from 'naive-ui'
+import { NMenu, NIcon, NLayout, NLayoutSider, NInput } from 'naive-ui'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import { useThemeStore } from '@/stores/theme'
 import {
@@ -227,8 +226,9 @@ const handleMenuSelect = (key: string) => {
 .header-left {
   display: flex;
   align-items: center;
-  width: 200px; /* 固定宽度避免折叠时右侧内容跳动 */
+  width: 200px;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .logo-icon {
@@ -265,28 +265,32 @@ const handleMenuSelect = (key: string) => {
   gap: 12px;
 }
 
-/* 关键布局区域 */
+/* 强制覆盖 n-layout 的默认样式，确保 Flex 生效 */
-.app-body {
+:deep(.n-layout.app-body) {
   flex: 1;
-  display: flex;
+  display: flex !important;
-  flex-direction: row;
+  flex-direction: row !important;
   overflow: hidden; /* 防止body本身滚动 */
+  background-color: transparent; /* 透视背景 */
 }
 
 /* 侧边栏 */
 .app-sider {
-  height: 100%; /* 撑满 body 高度 */
+  height: 100%;
   background-color: var(--sidebar-bg);
-  /* n-layout-sider 内部会自动处理 overflow */
+  /* 确保 sider 自身不收缩 */
+  flex-shrink: 0; 
 }
 
 /* 内容区 */
 .app-content {
   flex: 1;
   height: 100%;
-  overflow: hidden; /* 内部滚动 */
+  overflow: hidden;
   background-color: var(--content-bg);
   position: relative;
+  /* 确保内容区可以收缩 */
+  min-width: 0; 
 }
 
 .content-wrapper {
@@ -307,4 +311,4 @@ const handleMenuSelect = (key: string) => {
 :deep(.n-layout-sider--collapsed .n-menu-item) {
   margin-right: 0;
 }
-</style>
+</style>