xto-fronted 0.4.43 → 0.4.44
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/index-B5RdBQ-f.js +475 -0
- package/dist/index-CD1ZEMzL.js +2836 -0
- package/dist/index-DmFL_GSt.js +142 -0
- package/dist/index-DqUuZC8f.js +372 -0
- package/dist/index-hI3qofTF.js +345 -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 +67 -0
- package/src/components/Layout/MixTopMenu.vue +926 -926
- package/src/components/Layout/index.vue +188 -188
- package/src/router/staticRoutes.ts +18 -18
- package/src/views/error/403.vue +1 -1
- package/src/views/error/404.vue +1 -1
|
@@ -1,189 +1,189 @@
|
|
|
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
|
-
import MixTopMenu from './MixTopMenu.vue'
|
|
9
|
-
|
|
10
|
-
const appStore = useAppStore()
|
|
11
|
-
const menuStore = useMenuStore()
|
|
12
|
-
|
|
13
|
-
const sidebarWidth = computed(() =>
|
|
14
|
-
appStore.isCollapsed ? '64px' : '210px'
|
|
15
|
-
)
|
|
16
|
-
|
|
17
|
-
// 布局模式
|
|
18
|
-
const layoutMode = computed(() => appStore.layout)
|
|
19
|
-
|
|
20
|
-
// 是否显示混合模式（mix模式）
|
|
21
|
-
const isMixMode = computed(() => layoutMode.value === 'mix')
|
|
22
|
-
|
|
23
|
-
// 左侧菜单数据
|
|
24
|
-
// sidebar模式：显示全部菜单
|
|
25
|
-
// mix模式：显示当前选中一级菜单的子菜单
|
|
26
|
-
const sidebarMenuList = computed(() => {
|
|
27
|
-
if (layoutMode.value === 'sidebar') {
|
|
28
|
-
return menuStore.menuList
|
|
29
|
-
} else if (layoutMode.value === 'mix') {
|
|
30
|
-
// mix模式下显示当前选中一级菜单的子菜单
|
|
31
|
-
return appStore.mixSubMenus
|
|
32
|
-
}
|
|
33
|
-
return []
|
|
34
|
-
})
|
|
35
|
-
|
|
36
|
-
// mix模式下是否显示左侧菜单（有子菜单时才显示）
|
|
37
|
-
const showMixSidebar = computed(() => {
|
|
38
|
-
if (!isMixMode.value) return false
|
|
39
|
-
return sidebarMenuList.value.length > 0
|
|
40
|
-
})
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<template>
|
|
44
|
-
<!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
|
|
45
|
-
<div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
|
|
46
|
-
<aside class="layout__aside" :style="{ width: sidebarWidth }">
|
|
47
|
-
<Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" />
|
|
48
|
-
</aside>
|
|
49
|
-
<div class="layout__main">
|
|
50
|
-
<header class="layout__header">
|
|
51
|
-
<Header />
|
|
52
|
-
</header>
|
|
53
|
-
<main class="layout__content">
|
|
54
|
-
<router-view />
|
|
55
|
-
</main>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<!-- top模式：顶部菜单 + 主内容 -->
|
|
60
|
-
<div v-if="layoutMode === 'top'" class="layout layout--top">
|
|
61
|
-
<div class="layout__top-menu">
|
|
62
|
-
<TopMenu />
|
|
63
|
-
</div>
|
|
64
|
-
<div class="layout__main">
|
|
65
|
-
<main class="layout__content">
|
|
66
|
-
<router-view />
|
|
67
|
-
</main>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
<!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
|
|
72
|
-
<div v-if="layoutMode === 'mix'" class="layout layout--mix">
|
|
73
|
-
<!-- 顶部一级菜单 -->
|
|
74
|
-
<div class="layout__mix-top-menu">
|
|
75
|
-
<MixTopMenu />
|
|
76
|
-
</div>
|
|
77
|
-
<!-- 下方：左侧子菜单 + 主内容 -->
|
|
78
|
-
<div class="layout__mix-body">
|
|
79
|
-
<aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
|
|
80
|
-
<Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
|
|
81
|
-
</aside>
|
|
82
|
-
<main class="layout__content">
|
|
83
|
-
<router-view />
|
|
84
|
-
</main>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</template>
|
|
88
|
-
|
|
89
|
-
<style lang="scss" scoped>
|
|
90
|
-
.layout {
|
|
91
|
-
display: flex;
|
|
92
|
-
width: 100%;
|
|
93
|
-
height: 100%;
|
|
94
|
-
|
|
95
|
-
// 左侧菜单模式
|
|
96
|
-
&--sidebar {
|
|
97
|
-
flex-direction: row;
|
|
98
|
-
|
|
99
|
-
.layout__aside {
|
|
100
|
-
height: 100%;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.layout__main {
|
|
104
|
-
flex: 1;
|
|
105
|
-
display: flex;
|
|
106
|
-
flex-direction: column;
|
|
107
|
-
height: 100%;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// 顶部菜单模式
|
|
112
|
-
&--top {
|
|
113
|
-
flex-direction: column;
|
|
114
|
-
|
|
115
|
-
.layout__main {
|
|
116
|
-
flex: 1;
|
|
117
|
-
display: flex;
|
|
118
|
-
flex-direction: column;
|
|
119
|
-
height: calc(100% - 50px);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.layout__content {
|
|
123
|
-
flex: 1;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// 混合菜单模式
|
|
128
|
-
&--mix {
|
|
129
|
-
flex-direction: column;
|
|
130
|
-
|
|
131
|
-
.layout__mix-top-menu {
|
|
132
|
-
width: 100%;
|
|
133
|
-
height: 50px;
|
|
134
|
-
background-color: var(--bg-color);
|
|
135
|
-
border-bottom: 1px solid var(--color-border-lighter);
|
|
136
|
-
flex-shrink: 0;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.layout__mix-body {
|
|
140
|
-
flex: 1;
|
|
141
|
-
display: flex;
|
|
142
|
-
flex-direction: row;
|
|
143
|
-
height: calc(100% - 50px);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
&__aside {
|
|
148
|
-
transition: width 0.3s;
|
|
149
|
-
overflow: hidden;
|
|
150
|
-
flex-shrink: 0;
|
|
151
|
-
height: 100%;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
&__top-menu {
|
|
155
|
-
width: 100%;
|
|
156
|
-
height: 50px;
|
|
157
|
-
background-color: var(--bg-color);
|
|
158
|
-
border-bottom: 1px solid var(--color-border-lighter);
|
|
159
|
-
flex-shrink: 0;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
&__mix-top-menu {
|
|
163
|
-
width: 100%;
|
|
164
|
-
height: 50px;
|
|
165
|
-
flex-shrink: 0;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&__main {
|
|
169
|
-
flex: 1;
|
|
170
|
-
display: flex;
|
|
171
|
-
flex-direction: column;
|
|
172
|
-
overflow: hidden;
|
|
173
|
-
height: 100%;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
&__header {
|
|
177
|
-
height: 50px;
|
|
178
|
-
background-color: var(--bg-color);
|
|
179
|
-
border-bottom: 1px solid var(--color-border-lighter);
|
|
180
|
-
flex-shrink: 0;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&__content {
|
|
184
|
-
flex: 1;
|
|
185
|
-
overflow: auto;
|
|
186
|
-
background-color: var(--bg-color-page);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
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
|
+
import MixTopMenu from './MixTopMenu.vue'
|
|
9
|
+
|
|
10
|
+
const appStore = useAppStore()
|
|
11
|
+
const menuStore = useMenuStore()
|
|
12
|
+
|
|
13
|
+
const sidebarWidth = computed(() =>
|
|
14
|
+
appStore.isCollapsed ? '64px' : '210px'
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
// 布局模式
|
|
18
|
+
const layoutMode = computed(() => appStore.layout)
|
|
19
|
+
|
|
20
|
+
// 是否显示混合模式（mix模式）
|
|
21
|
+
const isMixMode = computed(() => layoutMode.value === 'mix')
|
|
22
|
+
|
|
23
|
+
// 左侧菜单数据
|
|
24
|
+
// sidebar模式：显示全部菜单
|
|
25
|
+
// mix模式：显示当前选中一级菜单的子菜单
|
|
26
|
+
const sidebarMenuList = computed(() => {
|
|
27
|
+
if (layoutMode.value === 'sidebar') {
|
|
28
|
+
return menuStore.menuList
|
|
29
|
+
} else if (layoutMode.value === 'mix') {
|
|
30
|
+
// mix模式下显示当前选中一级菜单的子菜单
|
|
31
|
+
return appStore.mixSubMenus
|
|
32
|
+
}
|
|
33
|
+
return []
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
// mix模式下是否显示左侧菜单（有子菜单时才显示）
|
|
37
|
+
const showMixSidebar = computed(() => {
|
|
38
|
+
if (!isMixMode.value) return false
|
|
39
|
+
return sidebarMenuList.value.length > 0
|
|
40
|
+
})
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<template>
|
|
44
|
+
<!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
|
|
45
|
+
<div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
|
|
46
|
+
<aside class="layout__aside" :style="{ width: sidebarWidth }">
|
|
47
|
+
<Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" />
|
|
48
|
+
</aside>
|
|
49
|
+
<div class="layout__main">
|
|
50
|
+
<header class="layout__header">
|
|
51
|
+
<Header />
|
|
52
|
+
</header>
|
|
53
|
+
<main class="layout__content">
|
|
54
|
+
<router-view />
|
|
55
|
+
</main>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- top模式：顶部菜单 + 主内容 -->
|
|
60
|
+
<div v-if="layoutMode === 'top'" class="layout layout--top">
|
|
61
|
+
<div class="layout__top-menu">
|
|
62
|
+
<TopMenu />
|
|
63
|
+
</div>
|
|
64
|
+
<div class="layout__main">
|
|
65
|
+
<main class="layout__content">
|
|
66
|
+
<router-view />
|
|
67
|
+
</main>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
|
|
72
|
+
<div v-if="layoutMode === 'mix'" class="layout layout--mix">
|
|
73
|
+
<!-- 顶部一级菜单 -->
|
|
74
|
+
<div class="layout__mix-top-menu">
|
|
75
|
+
<MixTopMenu />
|
|
76
|
+
</div>
|
|
77
|
+
<!-- 下方：左侧子菜单 + 主内容 -->
|
|
78
|
+
<div class="layout__mix-body">
|
|
79
|
+
<aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
|
|
80
|
+
<Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
|
|
81
|
+
</aside>
|
|
82
|
+
<main class="layout__content">
|
|
83
|
+
<router-view />
|
|
84
|
+
</main>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</template>
|
|
88
|
+
|
|
89
|
+
<style lang="scss" scoped>
|
|
90
|
+
.layout {
|
|
91
|
+
display: flex;
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 100%;
|
|
94
|
+
|
|
95
|
+
// 左侧菜单模式
|
|
96
|
+
&--sidebar {
|
|
97
|
+
flex-direction: row;
|
|
98
|
+
|
|
99
|
+
.layout__aside {
|
|
100
|
+
height: 100%;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.layout__main {
|
|
104
|
+
flex: 1;
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
height: 100%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// 顶部菜单模式
|
|
112
|
+
&--top {
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
|
|
115
|
+
.layout__main {
|
|
116
|
+
flex: 1;
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
height: calc(100% - 50px);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.layout__content {
|
|
123
|
+
flex: 1;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// 混合菜单模式
|
|
128
|
+
&--mix {
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
|
|
131
|
+
.layout__mix-top-menu {
|
|
132
|
+
width: 100%;
|
|
133
|
+
height: 50px;
|
|
134
|
+
background-color: var(--bg-color);
|
|
135
|
+
border-bottom: 1px solid var(--color-border-lighter);
|
|
136
|
+
flex-shrink: 0;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.layout__mix-body {
|
|
140
|
+
flex: 1;
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-direction: row;
|
|
143
|
+
height: calc(100% - 50px);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&__aside {
|
|
148
|
+
transition: width 0.3s;
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
flex-shrink: 0;
|
|
151
|
+
height: 100%;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&__top-menu {
|
|
155
|
+
width: 100%;
|
|
156
|
+
height: 50px;
|
|
157
|
+
background-color: var(--bg-color);
|
|
158
|
+
border-bottom: 1px solid var(--color-border-lighter);
|
|
159
|
+
flex-shrink: 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__mix-top-menu {
|
|
163
|
+
width: 100%;
|
|
164
|
+
height: 50px;
|
|
165
|
+
flex-shrink: 0;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&__main {
|
|
169
|
+
flex: 1;
|
|
170
|
+
display: flex;
|
|
171
|
+
flex-direction: column;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
height: 100%;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&__header {
|
|
177
|
+
height: 50px;
|
|
178
|
+
background-color: var(--bg-color);
|
|
179
|
+
border-bottom: 1px solid var(--color-border-lighter);
|
|
180
|
+
flex-shrink: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&__content {
|
|
184
|
+
flex: 1;
|
|
185
|
+
overflow: auto;
|
|
186
|
+
background-color: var(--bg-color-page);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
189
|
</style>
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 静态路由
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import type { RouteRecordRaw } from 'vue-router'
|
|
6
|
-
|
|
7
|
-
export const staticRoutes: RouteRecordRaw[] = [
|
|
8
|
-
{
|
|
9
|
-
path: '/login',
|
|
10
|
-
name: 'Login',
|
|
11
|
-
component: () => import('@/views/login/index.vue'),
|
|
12
|
-
meta: {
|
|
13
|
-
title: '登录',
|
|
14
|
-
hidden: true
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
]
|
|
18
|
-
|
|
1
|
+
/**
|
|
2
|
+
* 静态路由
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import type { RouteRecordRaw } from 'vue-router'
|
|
6
|
+
|
|
7
|
+
export const staticRoutes: RouteRecordRaw[] = [
|
|
8
|
+
{
|
|
9
|
+
path: '/login',
|
|
10
|
+
name: 'Login',
|
|
11
|
+
component: () => import('@/views/login/index.vue'),
|
|
12
|
+
meta: {
|
|
13
|
+
title: '登录',
|
|
14
|
+
hidden: true
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
|
|
19
19
|
// 注意：404 和 403 路由已在 layoutRoute.ts 的 catch-all 中处理，确保在 Layout 内部渲染
|
package/src/views/error/403.vue
CHANGED