fix: ref写法优化 路由跳转逻辑优化 部分样式优化

src/layouts/BasicLayout.module.less

@@ -79,20 +79,6 @@
     }
   }
 
-  .menuItem {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-
-    :global(.anticon) {
-      font-size: 14px;
-    }
-  }
-
-  .menuItemDanger {
-    color: #ff4d4f;
-  }
-
   .content {
     margin: 16px;
     border-radius: 8px;
@@ -135,3 +121,21 @@
     border-top: 1px solid #f0f0f0;
   }
 }
+
+/**
+ * Dropdown 菜单通过 portal 挂到 body，不在 .basicLayoutMain 内。
+ * 若嵌套在 .basicLayoutMain 下，CSS Modules 会生成「父级 + 子级」选择器，导致匹配失败。
+ */
+.menuItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  :global(.anticon) {
+    font-size: 14px;
+  }
+}
+
+.menuItemDanger {
+  color: #ff4d4f;
+}

src/layouts/BasicLayout.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, ref, Transition, KeepAlive } from 'vue';
+import { computed, defineComponent, h, Transition, KeepAlive } from 'vue';
 import type { CSSProperties } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
@@ -74,7 +74,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
-    const collapsed = ref(false);
+    const [collapsed, setCollapsed] = useState(false);
 
     const { menuItems } = useMenuStore();
     const { phone } = useUserStore();
@@ -90,7 +90,7 @@ export default defineComponent({
     };
 
     const toggleCollapsed = () => {
-      collapsed.value = !collapsed.value;
+      setCollapsed(!collapsed.value);
     };
 
     const activeTabKey = computed(() => route.path);