Skip to content

Commit eb47a92

Browse files
author
sunshine824
committed
路由优化
1 parent 4d63670 commit eb47a92

File tree

32 files changed

+447
-241
lines changed

32 files changed

+447
-241
lines changed

‎src/components/ABreadCrumb/index.tsx‎

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { defineComponent, watch, computed, onMounted } from 'vue'
2-
import { useRoute } from 'vue-router'
1+
import { defineComponent, watch, Ref, ref, onMounted } from 'vue'
2+
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
33
import { Breadcrumb } from 'ant-design-vue'
44

55
import styles from './index.module.less'
@@ -8,23 +8,64 @@ const ABreadCrumb = defineComponent({
88
name: 'ABreadCrumb',
99
setup({ props }) {
1010
const route = useRoute()
11+
const router = useRouter()
12+
13+
const breadList: Ref<string[]> = ref([])
1114

1215
onMounted(() => {
13-
console.log(breadList)
16+
getRouteBreadList()
1417
})
1518

1619
// 监听路由变化
17-
const breadList = computed(() => {
18-
const paths = route.path.split('/')
20+
watch(route, (val) => {
21+
breadList['value'] = []
22+
getRouteBreadList()
1923
})
2024

25+
// 获取路由地址列表
26+
const getRouteBreadList = () => {
27+
const paths = route.path.split('/')
28+
if (paths.length > 1) {
29+
const menus = getMenus().filter(
30+
(item: RouteRecordRaw) => item.name == paths[1],
31+
)
32+
if (menus.length) {
33+
getRouteDict(menus, paths)
34+
}
35+
}
36+
}
37+
38+
// 根据路由获取面包屑列表
39+
const getRouteDict = (menus: any, paths: string[]) => {
40+
menus.forEach((item: any) => {
41+
if (paths.includes(item.name)) {
42+
breadList['value'].push(item?.meta?.title)
43+
}
44+
if (item.children && item.children.length) {
45+
getRouteDict(item.children, paths)
46+
}
47+
})
48+
}
49+
50+
// 获取路由列表
51+
const getMenus = () => {
52+
let menuList: RouteRecordRaw[] = []
53+
const routes: Array<RouteRecordRaw> = router.options?.routes || []
54+
routes.forEach((item) => {
55+
if (item.path == '/') {
56+
menuList = item.children || []
57+
}
58+
})
59+
return JSON.parse(JSON.stringify(menuList))
60+
}
61+
2162
return () => (
2263
<div class={styles['bread-crumb']}>
2364
<span class={styles['location']}>当前位置：</span>
2465
<Breadcrumb>
25-
<Breadcrumb.Item>Home</Breadcrumb.Item>
26-
<Breadcrumb.Item>Application</Breadcrumb.Item>
27-
<Breadcrumb.Item>Center</Breadcrumb.Item>
66+
{breadList['value'].map((item) => {
67+
return <Breadcrumb.Item>{item}</Breadcrumb.Item>
68+
})}
2869
</Breadcrumb>
2970
</div>
3071
)

‎src/components/GlobalHeader/Menus.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,13 @@ const Menus = defineComponent({
2222
const activeRoute = ref() // 当前路由
2323

2424
onMounted(() => {
25-
const paths = route.path.split('/')
26-
activeRoute.value = paths[paths.length - 1]
25+
activeRoute.value = route.path
2726
})
2827

2928
// 默认展开项
3029
const openKeys = computed(() => {
3130
if (props.mode == 'inline') {
32-
return ['/smart', '/eoms', '/system', '/database']
31+
return ['/designCenter/materialMange']
3332
}
3433
return []
3534
})
@@ -41,8 +40,7 @@ const Menus = defineComponent({
4140

4241
// 监听路由变化
4342
watch(route, (val) => {
44-
const paths = val.path.split('/')
45-
activeRoute.value = paths[paths.length - 1]
43+
activeRoute.value = val.path
4644
})
4745

4846
// 子级导航渲染
@@ -63,7 +61,7 @@ const Menus = defineComponent({
6361
{menus.children.map((menu: any) => {
6462
if (!menu.children || !menu.children.length) {
6563
return (
66-
<Menu.Item key={menu.name}>
64+
<Menu.Item key={menu.path}>
6765
{menus.meta?.icon && (
6866
<span
6967
class={`iconfont ${menu.meta.icon} menu-icon`}
@@ -88,7 +86,6 @@ const Menus = defineComponent({
8886
class={`${styles['menu-class']} ${styles[props.mode + '-menu-class']}`}
8987
>
9088
<Menu
91-
theme="dark"
9289
selectedKeys={[activeRoute.value]}
9390
openKeys={openKeys.value}
9491
mode={props.mode}
@@ -98,7 +95,7 @@ const Menus = defineComponent({
9895
{(props.menuLists as RouteRecordRaw[]).map((menu) => {
9996
if (!menu.children || !menu.children.length) {
10097
return (
101-
<Menu.Item key={menu.name}>
98+
<Menu.Item key={menu.path}>
10299
{menu.meta?.icon && (
103100
<span class={`iconfont ${menu.meta.icon} menu-icon`}></span>
104101
)}

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

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99
:global {
1010
.ant-layout-header {
11-
background-color: #19192e;
11+
background-color: #191c3e;
1212
display: flex;
1313
flex-flow: row nowrap;
1414
justify-content: space-between;
@@ -41,7 +41,7 @@
4141
.menu-class {
4242
:global {
4343
.menu-icon {
44-
margin-right: 15px;
44+
margin-right: 10px;
4545
}
4646
}
4747
.ant-menu-inline-collapsed {
@@ -145,26 +145,55 @@
145145
}
146146
}
147147
&.inline-menu-class {
148-
.ant-menu-dark,
149-
.ant-menu-dark .ant-menu-sub {
150-
background: #1d1e1f;
151-
}
152-
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
153-
background: #000c17;
154-
}
155-
.ant-menu-item {
156-
font-size: 15px;
157-
border-bottom: none;
158-
top: 0;
159-
&-active {
160-
background: rgba(57, 57, 57, 0.5);
161-
color: rgba(255, 255, 255, 0.9);
148+
:global {
149+
.ant-menu-dark,
150+
.ant-menu-dark .ant-menu-sub {
151+
background: #1d1e1f;
152+
}
153+
.ant-menu-submenu:hover
154+
> .ant-menu-submenu-title
155+
> .ant-menu-submenu-expand-icon,
156+
.ant-menu-submenu:hover
157+
> .ant-menu-submenu-title
158+
> .ant-menu-submenu-arrow {
159+
color: #222b65;
162160
}
163-
&-selected {
164-
background: #1f7eff;
165-
position: relative;
166-
font-weight: 700;
167-
color: rgba(255, 255, 255, 0.9);
161+
.ant-menu-light .ant-menu-item:hover,
162+
.ant-menu-light .ant-menu-item-active,
163+
.ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
164+
.ant-menu-light .ant-menu-submenu-active,
165+
.ant-menu-light .ant-menu-submenu-title:hover {
166+
color: #222b65;
167+
}
168+
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
169+
background: #000c17;
170+
}
171+
.ant-menu-submenu-selected {
172+
color: #222b65;
173+
}
174+
.ant-menu-item {
175+
font-size: 14px;
176+
border-bottom: none;
177+
top: 0;
178+
&:active {
179+
background: rgba(39, 60, 192, 0.05);
180+
}
181+
&:hover {
182+
background: rgba(39, 60, 192, 0.05);
183+
color: rgba(0, 0, 0, 0.85);
184+
}
185+
&-active {
186+
background: rgba(39, 60, 192, 0.05);
187+
color: rgba(0, 0, 0, 0.85);
188+
}
189+
&-selected {
190+
position: relative;
191+
color: #273cc0;
192+
background: rgba(39, 60, 192, 0.16) !important;
193+
&::after {
194+
border-color: #273cc0;
195+
}
196+
}
168197
}
169198
}
170199
}

‎src/layouts/BlankLayout.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineComponent } from 'vue'
2+
import { RouterView } from 'vue-router'
3+
4+
const BlankLayout = defineComponent({
5+
setup() {
6+
return () => <RouterView />
7+
},
8+
})
9+
10+
export default BlankLayout

‎src/layouts/index.module.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
width: 210px;
1616
height: 100%;
1717
background: #fff;
18-
padding: 20px 10px;
18+
padding: 6px 0;
1919
}
2020
}
2121
.user-info {

‎src/layouts/index.ts‎

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

4-
export { LevelBasicLayout, RouteLayout }
5+
export { LevelBasicLayout, RouteLayout, BlankLayout }

‎src/mock/user/permission.ts‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,56 @@ const BaseUrl = import.meta.env.VITE_API_BASE_URL as string
55

66
const Roles = [
77
{
8-
moduleUrl: '/database', // 模块地址
9-
url: '/database', // 路由地址
10-
name: '数据库配置',
11-
icon: 'icon-zichan',
8+
url: '/dataProtal', // 模块路径&访问路由
9+
name: '/dataProtal',
10+
title: '数据门户',
11+
icon: 'icon-index-copy',
1212
},
1313
{
14-
moduleUrl: '/eoms',
15-
url: '/eoms',
16-
name: '运维配置',
17-
icon: 'icon-yunwei1',
14+
url: '/dataManage',
15+
name: '/dataManage',
16+
title: '数据管理',
17+
icon: 'icon-shuju',
18+
},
19+
{
20+
url: '/designCenter',
21+
name: '/designCenter',
22+
title: '设计中心',
23+
icon: 'icon-shejishi2',
1824
list: [
1925
{
20-
name: '故障处理方案',
21-
moduleUrl: '/eoms/fault',
22-
url: 'fault',
23-
icon: '',
26+
url: '/designCenter/screenManage',
27+
name: 'screenManage',
28+
title: '画面管理',
29+
icon: 'icon-shituzhushitu',
2430
},
2531
{
26-
moduleUrl: '/eoms/alarm',
27-
url: 'alarm',
28-
name: '告警模板管理',
29-
icon: '',
32+
url: '/designCenter/materialMange',
33+
name: 'materialMange',
34+
title: '素材中心',
35+
icon: 'icon-sucai',
36+
list: [
37+
{
38+
url: '/designCenter/materialMange/customControl',
39+
name: 'customControl',
40+
title: '自定义控件',
41+
icon: 'icon-zidingyi',
42+
},
43+
{
44+
url: '/designCenter/materialMange/customMaterial',
45+
name: 'customMaterial',
46+
title: '自定义素材',
47+
icon: 'icon-jichukongjiantubiao-gonggongxuanzekuang',
48+
},
49+
],
3050
},
3151
],
3252
},
3353
{
34-
moduleUrl: '/smart',
35-
url: '/smart',
36-
name: '物联管理',
37-
icon: 'icon-wulianwang',
54+
url: '/userManage',
55+
name: '/userManage',
56+
title: '用户管理',
57+
icon: 'icon-yonghuguanli',
3858
},
3959
]
4060

0 commit comments

Comments
 (0)