72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
|
import { computed, defineComponent, ref } from 'vue';
|
||
|
|
import { useRouter, useRoute, RouterView } from 'vue-router';
|
||
|
|
import { Layout, Menu } from 'ant-design-vue';
|
||
|
|
import type { MenuProps } from 'ant-design-vue';
|
||
|
|
import {
|
||
|
|
DashboardOutlined,
|
||
|
|
InfoCircleOutlined,
|
||
|
|
MenuFoldOutlined,
|
||
|
|
MenuUnfoldOutlined,
|
||
|
|
} from '@ant-design/icons-vue';
|
||
|
|
import styles from './BasicLayout.module.less';
|
||
|
|
|
||
|
|
const { Header, Sider, Content, Footer } = Layout;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 基础布局:左侧导航 + 顶部栏 + 内容区 + 页脚
|
||
|
|
*/
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BasicLayout',
|
||
|
|
setup() {
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
const collapsed = ref(false);
|
||
|
|
|
||
|
|
const selectedKeys = computed<string[]>(() => [route.path]);
|
||
|
|
|
||
|
|
const menuItems: MenuProps['items'] = [
|
||
|
|
{ key: '/dashboard', icon: () => <DashboardOutlined />, label: '工作台' },
|
||
|
|
{ key: '/about', icon: () => <InfoCircleOutlined />, label: '关于' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
|
||
|
|
router.push(key as string);
|
||
|
|
};
|
||
|
|
|
||
|
|
const toggleCollapsed = () => {
|
||
|
|
collapsed.value = !collapsed.value;
|
||
|
|
};
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<Layout class={styles.container}>
|
||
|
|
<Sider class={styles.sider} collapsed={collapsed.value} trigger={null} collapsible>
|
||
|
|
<div class={styles.logo}>
|
||
|
|
<span class={styles.logoText}>{collapsed.value ? 'CPMS' : 'CPMS 运营平台'}</span>
|
||
|
|
</div>
|
||
|
|
<Menu
|
||
|
|
theme="dark"
|
||
|
|
mode="inline"
|
||
|
|
selectedKeys={selectedKeys.value}
|
||
|
|
items={menuItems}
|
||
|
|
onClick={handleMenuClick}
|
||
|
|
/>
|
||
|
|
</Sider>
|
||
|
|
|
||
|
|
<Layout>
|
||
|
|
<Header class={styles.header}>
|
||
|
|
<span class={styles.trigger} onClick={toggleCollapsed}>
|
||
|
|
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||
|
|
</span>
|
||
|
|
</Header>
|
||
|
|
|
||
|
|
<Content class={styles.content}>
|
||
|
|
<RouterView />
|
||
|
|
</Content>
|
||
|
|
|
||
|
|
<Footer class={styles.footer}>CPMS 运营平台 ©{new Date().getFullYear()}</Footer>
|
||
|
|
</Layout>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|