20260719215738

code/fms/fms-vue/src/layouts/components/AppSidebar.vue

@@ -20,8 +20,9 @@ const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
 const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
+const effectiveCollapsed = computed(() => appStore.sidebarCollapsed);
 
-const menuItems = [
+const fallbackMenuItems = [
   {
     key: "/dashboard",
     icon: menuIcon(House),
@@ -139,8 +140,8 @@ const menuItems = [
       { key: "/system/field", label: "字段配置" },
       { key: "/system/statisticalSettings", label: "查询设置" },
       { key: "/system/mappingConfig", label: "映射配置" },
-      { key: "/system/moduleSettings", label: "模块设置" },
       { key: "/system/autoId", label: "自动编码" },
+      { key: "/demo/modules", label: "模块管理" },
     ],
   },
   {
@@ -160,20 +161,30 @@ const menuItems = [
   },
 ];
 
+const menuItems = ref(fallbackMenuItems);
+
 const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
 const openKeys = ref([]);
-const parentKeyByRoute = new Map(
-  menuItems.flatMap((item) =>
-    item.children?.map((child) => [child.key, item.key]) ?? [],
-  ),
-);
+const parentKeysByRoute = computed(() => {
+  const result = new Map();
+  const visit = (items, parents = []) => {
+    items.forEach((item) => {
+      if (item.children?.length) visit(item.children, [...parents, item.key]);
+      else result.set(item.key, parents);
+    });
+  };
+  visit(menuItems.value);
+  return result;
+});
 
 watch(
-  () => route.meta.menuKey || route.path,
-  (menuKey) => {
-    const parentKey = parentKeyByRoute.get(menuKey);
-    if (parentKey && !openKeys.value.includes(parentKey)) {
-      openKeys.value = [...openKeys.value, parentKey];
+  [() => route.meta.menuKey || route.path, menuItems],
+  ([menuKey]) => {
+    const parentKeys = parentKeysByRoute.value.get(menuKey) || [];
+    const nextKeys = new Set(openKeys.value);
+    parentKeys.forEach((key) => nextKeys.add(key));
+    if (nextKeys.size !== openKeys.value.length) {
+      openKeys.value = Array.from(nextKeys);
     }
   },
   { immediate: true },
@@ -193,16 +204,16 @@ function updateOpenKeys(keys) {
 <template>
   <a-layout-sider
     class="app-sider"
-    :collapsed="appStore.sidebarCollapsed"
+    :collapsed="effectiveCollapsed"
     :trigger="null"
     :collapsed-width="56"
     collapsible
     theme="light"
     width="208"
   >
-    <div class="brand" :class="{ 'brand--collapsed': appStore.sidebarCollapsed }">
+    <div class="brand" :class="{ 'brand--collapsed': effectiveCollapsed }">
       <div class="brand__mark">F</div>
-      <div class="brand__copy" :aria-hidden="appStore.sidebarCollapsed">
+      <div class="brand__copy" :aria-hidden="effectiveCollapsed">
         <strong>FMS 管理系统</strong>
       </div>
     </div>
@@ -219,7 +230,7 @@ function updateOpenKeys(keys) {
     </div>
 
     <div class="sider-footer">
-      <a-tooltip :title="appStore.sidebarCollapsed ? '展开侧栏' : '收起侧栏'" placement="right">
+      <a-tooltip :title="effectiveCollapsed ? '展开侧栏' : '收起侧栏'" placement="right">
         <a-button
           type="text"
           class="sider-collapse"
@@ -227,7 +238,7 @@ function updateOpenKeys(keys) {
           @click="appStore.toggleSidebar"
         >
           <template #icon>
-            <PanelLeftOpen v-if="appStore.sidebarCollapsed" />
+            <PanelLeftOpen v-if="effectiveCollapsed" />
             <PanelLeftClose v-else />
           </template>
         </a-button>