1

src/views/admin/index.vue

@@ -16,6 +16,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { h, reactive, computed } from 'vue';
 import { useRouter } from 'vue-router';
@@ -38,6 +39,7 @@ interface MenuItem {
   path: string;
   name: string;
   icon?: any;
+  disabled?: boolean; // 新增字段
   children?: Omit<MenuItem, 'icon'>[]; // 子项不需要 icon
 }
 
@@ -48,17 +50,17 @@ const menuItems: MenuItem[] = [
   { path: '/layout/admin/image', name: '镜像', icon: GlobalOutlined },
   { path: '/layout/publicData', name: '公开数据', icon: LaptopOutlined },
   {
-    path: '', 
+    path: '',
     name: '费用',
     icon: MoneyCollectOutlined,
     children: [
-      { path: '/layout/admin/costDetail', name: '收支明细' },
+      // { path: '/layout/admin/costDetail', name: '收支明细' },
       { path: '/layout/admin/myOrder', name: '我的订单' },
       { path: '/layout/admin/flow', name: '账单明细' },
-      { path: '/layout/admin/coupon', name: '优惠券' },
+      { path: '/layout/admin/coupon', name: '优惠券(待开发)', disabled: true },
-      { path: '/layout/admin/invoice', name: '发票' },
+      { path: '/layout/admin/invoice', name: '发票(待开发)', disabled: true },
-      { path: '/layout/admin/voucher', name: '代金券' },
+      { path: '/layout/admin/voucher', name: '代金券(待开发)', disabled: true },
-      { path: '/layout/admin/contract', name: '合同' },
+      { path: '/layout/admin/contract', name: '合同(待开发)', disabled: true },
     ],
   },
   {
@@ -77,8 +79,8 @@ const menuItems: MenuItem[] = [
 const state = reactive({
   mode: 'inline' as MenuMode,
   theme: 'light' as MenuTheme,
-  selectedKeys: ['/layout/admin/home'], // 初始选中第一个
+  selectedKeys: ['/layout/admin/home'],
-  openKeys: ['/controlPanel/fee', '/controlPanel/account'], // 默认展开有子菜单的项
+  openKeys: ['/controlPanel/fee', '/controlPanel/account'],
 });
 
 // 工具函数：生成菜单项
@@ -87,7 +89,8 @@ function getItem(
   key: string,
   icon?: any,
   children?: ItemType[],
-  type?: 'group'
+  type?: 'group',
+  disabled?: boolean // 新增 disabled 参数
 ): ItemType {
   return {
     key,
@@ -95,6 +98,7 @@ function getItem(
     children,
     label,
     type,
+    disabled, // 应用 disabled
   } as ItemType;
 }
 
@@ -103,20 +107,36 @@ const items = computed(() => {
   return menuItems.map((item) => {
     if (item.children && item.children.length > 0) {
       const childItems = item.children.map((child) =>
-        getItem(child.name, child.path)
+        getItem(child.name, child.path, undefined, undefined, undefined, child.disabled)
       );
-      return getItem(item.name, item.path, h(item.icon), childItems);
+      return getItem(item.name, item.path, h(item.icon), childItems, undefined, item.disabled);
     } else {
-      return getItem(item.name, item.path, h(item.icon));
+      return getItem(item.name, item.path, h(item.icon), undefined, undefined, item.disabled);
     }
   });
 });
 
 const handleMenuSelect = ({ key }: { key: string }) => {
-    console.log("11!",key);
+  // 防止跳转到被禁用的菜单（虽然 a-menu 不会触发 select，但加个判断更安全）
+  const targetItem = findMenuItemByKey(menuItems, key);
+  if (targetItem?.disabled) {
+    return;
+  }
   router.push(key);
 };
 
+// 辅助函数：递归查找菜单项
+function findMenuItemByKey(items: MenuItem[], key: string): MenuItem | undefined {
+  for (const item of items) {
+    if (item.path === key) return item;
+    if (item.children) {
+      const found = findMenuItemByKey(item.children, key);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
 const changeMode = (checked: boolean) => {
   state.mode = checked ? 'vertical' : 'inline';
 };
@@ -129,21 +149,21 @@ const changeTheme = (checked: boolean) => {
 <style scoped>
 .admin-layout {
   display: flex;
-  height: calc(100vh - 60px); /* 全屏高度 */
+  height: calc(100vh - 60px);
   width: 100vw;
   overflow: hidden;
 }
 
 .admin-sidebar {
-  width: 256px; /* 和你原来设定一致 */
+  width: 256px;
-  flex-shrink: 0; /* 防止被压缩 */
+  flex-shrink: 0;
   height: 100%;
 }
 
 .admin-contain {
-  flex: 1; /* 占据剩余空间 */
+  flex: 1;
   padding: 20px;
-  overflow-y: auto; /* 内容超出可滚动 */
+  overflow-y: auto;
-  background-color: #f0f2f5; /* 可选：和 Ant Design 风格一致 */
+  background-color: #f0f2f5;
 }
 </style>