Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web
This commit is contained in:
commit
c99291c1bd
@ -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
|
||||
}
|
||||
|
||||
@ -52,13 +54,13 @@ const menuItems: MenuItem[] = [
|
||||
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/invoice', name: '发票' },
|
||||
{ path: '/layout/admin/voucher', name: '代金券' },
|
||||
{ path: '/layout/admin/contract', name: '合同' },
|
||||
{ path: '/layout/admin/coupon', name: '优惠券(待开发)', disabled: true },
|
||||
{ path: '/layout/admin/invoice', name: '发票(待开发)', disabled: true },
|
||||
{ path: '/layout/admin/voucher', name: '代金券(待开发)', disabled: true },
|
||||
{ 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'], // 初始选中第一个
|
||||
openKeys: ['/controlPanel/fee', '/controlPanel/account'], // 默认展开有子菜单的项
|
||||
selectedKeys: ['/layout/admin/home'],
|
||||
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; /* 和你原来设定一致 */
|
||||
flex-shrink: 0; /* 防止被压缩 */
|
||||
width: 256px;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.admin-contain {
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto; /* 内容超出可滚动 */
|
||||
background-color: #f0f2f5; /* 可选:和 Ant Design 风格一致 */
|
||||
overflow-y: auto;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user