Skip to content

Commit b0b4d1a

Browse files
陈鑫陈鑫
陈鑫
authored and
陈鑫
committed
项目搭建
1 parent 95284e5 commit b0b4d1a

23 files changed

+1628
-5
lines changed

‎src/components/GlobalHeader/Menus.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { defineComponent, ref, watch, computed } from 'vue'
2+
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
3+
import { Menu } from 'ant-design-vue'
4+
5+
import styles from './index.module.less'
6+
7+
const Menus = defineComponent({
8+
name: 'Menus',
9+
props: {
10+
mode: {
11+
type: String,
12+
default: 'horizontal',
13+
},
14+
},
15+
setup(props, { slots }) {
16+
const route = useRoute()
17+
const activeRoute = ref(route.path) // 当前路由
18+
19+
const openKeys = computed(() => {
20+
if (props.mode == 'inline') {
21+
return ['/smart', '/eoms', '/system', '/database']
22+
}
23+
return []
24+
}) // 默认展开项
25+
26+
const menuLists = computed(() => {
27+
return getMenus().filter((item) => !item?.meta?.hidden)
28+
}) // 获取显示状态的路由
29+
30+
const getMenus = () => {
31+
let menuList: RouteRecordRaw[] = []
32+
const routes: Array<RouteRecordRaw> = useRouter().options?.routes || []
33+
routes.forEach((item) => {
34+
if (item.path == '/') {
35+
menuList = item.children || []
36+
}
37+
})
38+
return menuList
39+
} // 获取路由列表
40+
41+
watch(route, (val) => {
42+
activeRoute.value = val.path
43+
}) // 监听路由变化
44+
45+
return () => (
46+
<div
47+
class={`${styles['menu-class']} ${styles[props.mode + '-menu-class']}`}
48+
>
49+
<Menu
50+
theme="dark"
51+
selectedKeys={[activeRoute.value]}
52+
openKeys={openKeys.value}
53+
style={{ lineHeight: '54px' }}
54+
>
55+
{menuLists['value'].map((menu) => {
56+
if (!menu.children || !menu.children.length) {
57+
return (
58+
<Menu.Item key={menu.path}>
59+
{menu.meta?.icon && (
60+
<span class={`iconfont ${menu.meta.icon} menu-icon`}></span>
61+
)}
62+
<span>{menu.meta?.title}</span>
63+
</Menu.Item>
64+
)
65+
}
66+
})}
67+
</Menu>
68+
</div>
69+
)
70+
},
71+
})
72+
73+
export default Menus

‎src/components/GlobalHeader/index.module.less‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,124 @@
3737
}
3838
}
3939
}
40+
41+
.menu-class {
42+
:global {
43+
.menu-icon {
44+
margin-right: 15px;
45+
}
46+
}
47+
.ant-menu-inline-collapsed {
48+
width: 60px;
49+
& > .ant-menu-submenu {
50+
& > .ant-menu-submenu-title {
51+
padding: 0 24px !important;
52+
.menu-icon {
53+
& + span {
54+
opacity: 0;
55+
}
56+
}
57+
}
58+
}
59+
& > .ant-menu-item {
60+
padding: 0 24px !important;
61+
.menu-icon {
62+
& + span {
63+
opacity: 0;
64+
}
65+
}
66+
}
67+
}
68+
&.horizontal-menu-class {
69+
:global {
70+
.ant-menu {
71+
background: #1d1e1f;
72+
max-width: 700px;
73+
margin-right: 20px;
74+
.ant-menu-item {
75+
color: #b0b0b1;
76+
font-size: 15px;
77+
border-bottom: none;
78+
top: 0;
79+
&-active {
80+
color: rgba(255, 255, 255, 0.9);
81+
}
82+
&-selected {
83+
background: #4a4b4c;
84+
position: relative;
85+
font-weight: 700;
86+
color: rgba(255, 255, 255, 0.9);
87+
border-bottom: none;
88+
&::after {
89+
content: '';
90+
position: absolute;
91+
bottom: 0;
92+
height: 3px;
93+
width: 100%;
94+
background: #0972fe;
95+
left: 0;
96+
}
97+
}
98+
}
99+
}
100+
.ant-menu-submenu {
101+
top: 0;
102+
border-bottom: none;
103+
&-title {
104+
color: #b0b0b1;
105+
font-size: 15px;
106+
&:hover {
107+
color: #fff;
108+
}
109+
}
110+
&-active {
111+
color: rgba(255, 255, 255, 0.9);
112+
border-bottom: none !important;
113+
}
114+
&-selected {
115+
background: #4a4b4c;
116+
position: relative;
117+
font-weight: 700;
118+
color: rgba(255, 255, 255, 0.9);
119+
border-bottom: none !important;
120+
.ant-menu-submenu-title {
121+
color: #fff;
122+
}
123+
&::after {
124+
content: '';
125+
position: absolute;
126+
bottom: 0;
127+
height: 3px;
128+
width: 100%;
129+
background: #0972fe;
130+
left: 0;
131+
}
132+
}
133+
}
134+
}
135+
}
136+
&.inline-menu-class {
137+
.ant-menu-dark,
138+
.ant-menu-dark .ant-menu-sub {
139+
background: #1d1e1f;
140+
}
141+
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
142+
background: #000c17;
143+
}
144+
.ant-menu-item {
145+
font-size: 15px;
146+
border-bottom: none;
147+
top: 0;
148+
&-active {
149+
background: rgba(57, 57, 57, 0.5);
150+
color: rgba(255, 255, 255, 0.9);
151+
}
152+
&-selected {
153+
background: #1f7eff;
154+
position: relative;
155+
font-weight: 700;
156+
color: rgba(255, 255, 255, 0.9);
157+
}
158+
}
159+
}
160+
}

‎src/components/GlobalHeader/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import GlobalHeader from './GlobalHeader'
2+
import Menus from './Menus'
3+
4+
export { GlobalHeader, Menus }

‎src/layouts/LevelBasicLayout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { defineComponent } from 'vue'
22
import { RouterView } from 'vue-router'
33
import { Layout } from 'ant-design-vue'
4-
import GlobalHeader from '@/components/GlobalHeader/GlobalHeader'
4+
import { GlobalHeader, Menus } from '@/components/GlobalHeader'
55

66
import styles from './index.module.less'
77

88
const LevelBasicLayout = defineComponent({
99
name: 'LevelBasicLayout',
1010
setup() {
1111
const slots = {
12-
content: () => <div></div>,
12+
content: () => <Menus></Menus>,
1313
}
1414
return () => (
1515
<Layout class={styles['level-layout']}>
16-
<GlobalHeader slots={slots}></GlobalHeader>
16+
<GlobalHeader v-slots={slots}></GlobalHeader>
1717
<Layout.Content>
1818
<RouterView />
1919
</Layout.Content>

‎src/layouts/RouteLayout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { defineComponent, watch, ref } from 'vue'
2+
import { RouterView, useRoute } from 'vue-router'
3+
4+
import styles from './index.module.less'
5+
6+
const RouteLayout = defineComponent({
7+
name: 'RouteLayout',
8+
props: {
9+
isSubView: {
10+
type: Boolean,
11+
default: true,
12+
},
13+
},
14+
setup(props, { slots }) {
15+
const route = useRoute()
16+
const routeName = ref(route.meta?.title) // 当前路由title
17+
18+
watch(route, (val) => {
19+
routeName.value = val.meta?.title
20+
}) // 监听路由变化
21+
22+
return () => (
23+
<div class={styles['page-view']}>
24+
<div class={styles['top-info']}>
25+
<h3 class={styles['title']}>{routeName.value}</h3>
26+
</div>
27+
<div class={styles['view-con']}>
28+
{props.isSubView ? <RouterView /> : slots.default?.()}
29+
</div>
30+
</div>
31+
)
32+
},
33+
})
34+
35+
export default RouteLayout

‎src/layouts/index.module.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,38 @@
77
}
88
}
99
}
10+
11+
.page-view {
12+
height: 100%;
13+
display: flex;
14+
flex-flow: column nowrap;
15+
.top-info {
16+
background: #fff;
17+
padding: 10px 10px;
18+
box-shadow: 0 2px 7px rgba(0, 21, 41, 0.08);
19+
.title {
20+
font-size: 18px;
21+
color: rgba(0, 0, 0, 0.8);
22+
display: flex;
23+
flex-flow: row nowrap;
24+
align-items: center;
25+
margin-bottom: 0;
26+
&::before {
27+
content: '';
28+
width: 4px;
29+
height: 24px;
30+
background: #1890ff;
31+
margin-right: 10px;
32+
}
33+
}
34+
}
35+
.view-con {
36+
flex: 1;
37+
margin: 10px 10px 5px 10px;
38+
box-shadow: 0 1px 20px #c6c4c4;
39+
background: #fff;
40+
border-radius: 4px;
41+
overflow-y: auto;
42+
overflow-x: hidden;
43+
}
44+
}

‎src/layouts/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import LevelBasicLayout from './LevelBasicLayout'
2+
import RouteLayout from './RouteLayout'
23

3-
export { LevelBasicLayout }
4+
export { LevelBasicLayout, RouteLayout }

‎src/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import router from './router'
44
import App from './App'
55
import { setupAntd } from './plugins/antd'
66

7+
import './public/css/base.css'
8+
import './public/css/init.less'
9+
import '@/public/font/iconfont.css';
10+
711
const app = createApp(App)
812

913
setupAntd(app)

0 commit comments

Comments
 (0)