Compare commits

..

No commits in common. "a70ac366e14633c15e9418374ebafb6ed7315b6d" and "285e6a8b31bb6a544ab4e6047575aa228c35330d" have entirely different histories.

View File

@ -16,7 +16,6 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { h, reactive, computed } from 'vue'; import { h, reactive, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -39,7 +38,6 @@ interface MenuItem {
path: string; path: string;
name: string; name: string;
icon?: any; icon?: any;
disabled?: boolean; //
children?: Omit<MenuItem, 'icon'>[]; // icon children?: Omit<MenuItem, 'icon'>[]; // icon
} }
@ -54,13 +52,13 @@ const menuItems: MenuItem[] = [
name: '费用', name: '费用',
icon: MoneyCollectOutlined, icon: MoneyCollectOutlined,
children: [ children: [
// { path: '/layout/admin/costDetail', name: '' }, { path: '/layout/admin/costDetail', name: '收支明细' },
{ path: '/layout/admin/myOrder', name: '我的订单' }, { path: '/layout/admin/myOrder', name: '我的订单' },
{ path: '/layout/admin/flow', name: '账单明细' }, { path: '/layout/admin/flow', name: '账单明细' },
{ path: '/layout/admin/coupon', name: '优惠券(待开发)', disabled: true }, { path: '/layout/admin/coupon', name: '优惠券' },
{ path: '/layout/admin/invoice', name: '发票(待开发)', disabled: true }, { path: '/layout/admin/invoice', name: '发票' },
{ path: '/layout/admin/voucher', name: '代金券(待开发)', disabled: true }, { path: '/layout/admin/voucher', name: '代金券' },
{ path: '/layout/admin/contract', name: '合同(待开发)', disabled: true }, { path: '/layout/admin/contract', name: '合同' },
], ],
}, },
{ {
@ -79,8 +77,8 @@ const menuItems: MenuItem[] = [
const state = reactive({ const state = reactive({
mode: 'inline' as MenuMode, mode: 'inline' as MenuMode,
theme: 'light' as MenuTheme, theme: 'light' as MenuTheme,
selectedKeys: ['/layout/admin/home'], selectedKeys: ['/layout/admin/home'], //
openKeys: ['/controlPanel/fee', '/controlPanel/account'], openKeys: ['/controlPanel/fee', '/controlPanel/account'], //
}); });
// //
@ -89,8 +87,7 @@ function getItem(
key: string, key: string,
icon?: any, icon?: any,
children?: ItemType[], children?: ItemType[],
type?: 'group', type?: 'group'
disabled?: boolean // disabled
): ItemType { ): ItemType {
return { return {
key, key,
@ -98,7 +95,6 @@ function getItem(
children, children,
label, label,
type, type,
disabled, // disabled
} as ItemType; } as ItemType;
} }
@ -107,36 +103,20 @@ const items = computed(() => {
return menuItems.map((item) => { return menuItems.map((item) => {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
const childItems = item.children.map((child) => const childItems = item.children.map((child) =>
getItem(child.name, child.path, undefined, undefined, undefined, child.disabled) getItem(child.name, child.path)
); );
return getItem(item.name, item.path, h(item.icon), childItems, undefined, item.disabled); return getItem(item.name, item.path, h(item.icon), childItems);
} else { } else {
return getItem(item.name, item.path, h(item.icon), undefined, undefined, item.disabled); return getItem(item.name, item.path, h(item.icon));
} }
}); });
}); });
const handleMenuSelect = ({ key }: { key: string }) => { const handleMenuSelect = ({ key }: { key: string }) => {
// a-menu select console.log("11!",key);
const targetItem = findMenuItemByKey(menuItems, key);
if (targetItem?.disabled) {
return;
}
router.push(key); 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) => { const changeMode = (checked: boolean) => {
state.mode = checked ? 'vertical' : 'inline'; state.mode = checked ? 'vertical' : 'inline';
}; };
@ -149,21 +129,21 @@ const changeTheme = (checked: boolean) => {
<style scoped> <style scoped>
.admin-layout { .admin-layout {
display: flex; display: flex;
height: calc(100vh - 60px); height: calc(100vh - 60px); /* 全屏高度 */
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
} }
.admin-sidebar { .admin-sidebar {
width: 256px; width: 256px; /* 和你原来设定一致 */
flex-shrink: 0; flex-shrink: 0; /* 防止被压缩 */
height: 100%; height: 100%;
} }
.admin-contain { .admin-contain {
flex: 1; flex: 1; /* 占据剩余空间 */
padding: 20px; padding: 20px;
overflow-y: auto; overflow-y: auto; /* 内容超出可滚动 */
background-color: #f0f2f5; background-color: #f0f2f5; /* 可选:和 Ant Design 风格一致 */
} }
</style> </style>