xto-fronted 0.4.20 → 0.4.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Layout/TopMenu.vue.d.ts +3 -1
- package/dist/index-B3kL6i_g.js +345 -0
- package/dist/index-CIb06BxE.js +372 -0
- package/dist/index-DGh_w_v1.js +475 -0
- package/dist/index-DUv28uVd.js +142 -0
- package/dist/index-HMYRCPrs.js +2326 -0
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/assets/styles/_dark.scss +48 -0
- package/src/components/Layout/TopMenu.vue +667 -1
- package/src/components/Layout/index.vue +124 -120
|
@@ -1,121 +1,125 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { computed } from 'vue'
|
|
3
|
-
import { useAppStore } from '@/stores/app'
|
|
4
|
-
import { useMenuStore } from '@/stores/menu'
|
|
5
|
-
import Sidebar from './Sidebar.vue'
|
|
6
|
-
import Header from './Header.vue'
|
|
7
|
-
import TopMenu from './TopMenu.vue'
|
|
8
|
-
|
|
9
|
-
const appStore = useAppStore()
|
|
10
|
-
const menuStore = useMenuStore()
|
|
11
|
-
|
|
12
|
-
const sidebarWidth = computed(() =>
|
|
13
|
-
appStore.isCollapsed ? '64px' : '210px'
|
|
14
|
-
)
|
|
15
|
-
|
|
16
|
-
// 布局模式
|
|
17
|
-
const layoutMode = computed(() => appStore.layout)
|
|
18
|
-
|
|
19
|
-
// 是否显示左侧菜单
|
|
20
|
-
const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
|
|
21
|
-
|
|
22
|
-
// 是否显示顶部菜单
|
|
23
|
-
const showTopMenu = computed(() => layoutMode.value === 'top')
|
|
24
|
-
|
|
25
|
-
//
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return menuStore.menuList
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
.
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
height:
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
flex:
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue'
|
|
3
|
+
import { useAppStore } from '@/stores/app'
|
|
4
|
+
import { useMenuStore } from '@/stores/menu'
|
|
5
|
+
import Sidebar from './Sidebar.vue'
|
|
6
|
+
import Header from './Header.vue'
|
|
7
|
+
import TopMenu from './TopMenu.vue'
|
|
8
|
+
|
|
9
|
+
const appStore = useAppStore()
|
|
10
|
+
const menuStore = useMenuStore()
|
|
11
|
+
|
|
12
|
+
const sidebarWidth = computed(() =>
|
|
13
|
+
appStore.isCollapsed ? '64px' : '210px'
|
|
14
|
+
)
|
|
15
|
+
|
|
16
|
+
// 布局模式
|
|
17
|
+
const layoutMode = computed(() => appStore.layout)
|
|
18
|
+
|
|
19
|
+
// 是否显示左侧菜单
|
|
20
|
+
const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
|
|
21
|
+
|
|
22
|
+
// 是否显示顶部菜单
|
|
23
|
+
const showTopMenu = computed(() => layoutMode.value === 'top')
|
|
24
|
+
|
|
25
|
+
// 是否显示Header（顶部菜单模式下不显示，因为功能已移到TopMenu）
|
|
26
|
+
const showHeader = computed(() => layoutMode.value !== 'top')
|
|
27
|
+
|
|
28
|
+
// 混合模式下只显示当前顶部菜单的子菜单
|
|
29
|
+
const mixSubMenus = computed(() => {
|
|
30
|
+
if (layoutMode.value !== 'mix') return menuStore.menuList
|
|
31
|
+
// 混合模式需要根据顶部选中的菜单显示子菜单
|
|
32
|
+
// 这里暂时返回全部菜单，后续可根据实际需求调整
|
|
33
|
+
return menuStore.menuList
|
|
34
|
+
})
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<template>
|
|
38
|
+
<div class="layout" :class="`layout--${layoutMode}`">
|
|
39
|
+
<!-- 左侧菜单布局 -->
|
|
40
|
+
<aside v-if="showSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
|
|
41
|
+
<Sidebar :menu-list="layoutMode === 'mix' ? mixSubMenus : menuStore.menuList" />
|
|
42
|
+
</aside>
|
|
43
|
+
|
|
44
|
+
<!-- 顶部菜单布局（包含右侧操作功能） -->
|
|
45
|
+
<div v-if="showTopMenu" class="layout__top-menu">
|
|
46
|
+
<TopMenu />
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="layout__main">
|
|
50
|
+
<!-- Header仅在sidebar和mix模式下显示 -->
|
|
51
|
+
<header v-if="showHeader" class="layout__header">
|
|
52
|
+
<Header />
|
|
53
|
+
</header>
|
|
54
|
+
<main class="layout__content">
|
|
55
|
+
<router-view />
|
|
56
|
+
</main>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
|
|
61
|
+
<style lang="scss" scoped>
|
|
62
|
+
.layout {
|
|
63
|
+
display: flex;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
|
|
67
|
+
// 左侧菜单模式
|
|
68
|
+
&--sidebar {
|
|
69
|
+
flex-direction: row;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 顶部菜单模式
|
|
73
|
+
&--top {
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
|
|
76
|
+
.layout__aside {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.layout__main {
|
|
81
|
+
flex: 1;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// 混合菜单模式
|
|
86
|
+
&--mix {
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&__aside {
|
|
91
|
+
transition: width 0.3s;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
flex-shrink: 0;
|
|
94
|
+
height: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&__top-menu {
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 50px;
|
|
100
|
+
background-color: var(--bg-color);
|
|
101
|
+
border-bottom: 1px solid var(--color-border-lighter);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__main {
|
|
105
|
+
flex: 1;
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
height: 100%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&__header {
|
|
113
|
+
height: 50px;
|
|
114
|
+
background-color: var(--bg-color);
|
|
115
|
+
border-bottom: 1px solid var(--color-border-lighter);
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&__content {
|
|
120
|
+
flex: 1;
|
|
121
|
+
overflow: auto;
|
|
122
|
+
background-color: var(--bg-color-page);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
121
125
|
</style>
|