8000 feat: 菜单导航设置支持纯顶部 · insistence/RuoYi-Vue3-FastAPI@6ad0a63 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6ad0a63

Browse files
insistenceinsistence
committed
feat: 菜单导航设置支持纯顶部
1 parent ab4eb00 commit 6ad0a63

File tree

10 files changed

+280
-31
lines changed

10 files changed

+280
-31
lines changed

‎ruoyi-fastapi-frontend/src/assets/styles/ruoyi.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,18 @@
156156
width: inherit;
157157
}
158158

159+
/* el menu */
160+
.el-menu-item,
161+
.el-sub-menu {
162+
.svg-icon + span {
163+
margin-left: 5px;
164+
}
165+
}
166+
167+
.el-menu--horizontal .el-menu--popup {
168+
min-width: 120px !important;
169+
}
170+
159171
/** 表格更多操作下拉样式 */
160172
.el-table .el-dropdown-link {
161173
cursor: pointer;

‎ruoyi-fastapi-frontend/src/assets/styles/sidebar.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
}
6262

6363
.svg-icon {
64-
margin-right: 16px;
64+
margin-right: 10px !important;
6565
}
6666

6767
.el-menu {

‎ruoyi-fastapi-frontend/src/components/Breadcrumb/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ getBreadcrumb()
8888
display: inline-block;
8989
font-size: 14px;
9090
line-height: 50px;
91-
margin-left: 8px;
9291
9392
.no-redirect {
9493
color: #97a8be;

‎ruoyi-fastapi-frontend/src/components/TopNav/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ onMounted(() => {
174174
float: left;
175175
height: 50px !important;
176176
line-height: 50px !important;
177-
color: #999093 !important;
177+
color: #303133 !important;
178178
padding: 0 5px !important;
179179
margin: 0 10px !important;
180180
}
@@ -189,7 +189,7 @@ onMounted(() => {
189189
float: left;
190190
height: 50px !important;
191191
line-height: 50px !important;
192-
color: #999093 !important;
192+
color: #303133 !important;
193193
padding: 0 5px !important;
194194
margin: 0 10px !important;
195195
}

‎ruoyi-fastapi-frontend/src/layout/components/Navbar.vue‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<template>
2-
<div class="navbar">
2+
<div class="navbar" :class="'nav' + settingsStore.navType">
33
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
4-
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
5-
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
4+
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
5+
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
6+
<template v-if="settingsStore.navType == 3">
7+
<logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
8+
<top-bar id="topbar-container" class="topbar-container" />
9+
</template>
610

711
<div class="right-menu">
812
<template v-if="appStore.device !== 'mobile'">
@@ -57,6 +61,8 @@
5761
import { ElMessageBox } from 'element-plus'
5862
import Breadcrumb from '@/components/Breadcrumb'
5963
import TopNav from '@/components/TopNav'
64+
import TopBar from './TopBar'
65+
import Logo from './Sidebar/Logo'
6066
import Hamburger from '@/components/Hamburger'
6167
import Screenfull from '@/components/Screenfull'
6268
import SizeSelect from '@/components/SizeSelect'
@@ -111,45 +117,68 @@ function toggleTheme() {
111117
</script>
112118

113119
<style lang='scss' scoped>
120+
.navbar.nav3 {
121+
.hamburger-container {
122+
display: none !important;
123+
}
124+
}
125+
114126
.navbar {
115127
height: 50px;
116128
overflow: hidden;
117129
position: relative;
118130
background: var(--navbar-bg);
119131
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
132+
display: flex;
133+
align-items: center;
134+
// padding: 0 8px;
135+
box-sizing: border-box;
120136
121137
.hamburger-container {
122138
line-height: 46px;
123139
height: 100%;
124-
float: left;
125140
cursor: pointer;
126141
transition: background 0.3s;
127142
-webkit-tap-highlight-color: transparent;
143+
display: flex;
144+
align-items: center;
145+
flex-shrink: 0;
146+
margin-right: 8px;
128147
129148
&:hover {
130149
background: rgba(0, 0, 0, 0.025);
131150
}
132151
}
133152
134153
.breadcrumb-container {
135-
float: left;
154+
flex-shrink: 0;
136155
}
137156
138157
.topmenu-container {
139158
position: absolute;
140159
left: 50px;
141160
}
142161
162+
.topbar-container {
163+
flex: 1;
164+
min-width: 0;
165+
display: flex;
166+
align-items: center;
167+
overflow: hidden;
168+
margin-left: 8px;
169+
}
170+
143171
.errLog-container {
144172
display: inline-block;
145173
vertical-align: top;
146174
}
147175
148176
.right-menu {
149-
float: right;
150177
height: 100%;
151178
line-height: 50px;
152179
display: flex;
180+
align-items: center;
181+
margin-left: auto;
153182
154183
&:focus {
155184
outline: none;

‎ruoyi-fastapi-frontend/src/layout/components/Settings/index.vue‎

Lines changed: 114 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
<template>
22
<el-drawer v-model="showSettings" :withHeader="false" :lock-scroll="false" direction="rtl" size="300px">
3+
<div class="setting-drawer-title">
4+
<h3 class="drawer-title">菜单导航设置</h3>
5+
</div>
6+
<div class="nav-wrap">
7+
<el-tooltip content="左侧菜单" placement="bottom">
8+
<div class="item left" @click="handleNavType(1)" :class="{ activeItem: navType == 1 }">
9+
<b></b><b></b>
10+
</div>
11+
</el-tooltip>
12+
13+
<el-tooltip content="混合菜单" placement="bottom">
14+
<div class="item mix" @click="handleNavType(2)" :class="{ activeItem: navType == 2 }">
15+
<b></b><b></b>
16+
</div>
17+
</el-tooltip>
18+
<el-tooltip content="顶部菜单" placement="bottom">
19+
<div class="item top" @click="handleNavType(3)" :class="{ activeItem: navType == 3 }">
20+
<b></b><b></b>
21+
</div>
22+
</el-tooltip>
23+
</div>
324
<div class="setting-drawer-title">
425
<h3 class="drawer-title">主题风格设置</h3>
526
</div>
@@ -35,13 +56,6 @@
3556

3657
<h3 class="drawer-title">系统布局配置</h3>
3758

38-
<div class="drawer-item">
39-
<span>开启 TopNav</span>
40-
<span class="comp-style">
41-
<el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
42-
</span>
43-
</div>
44-
4559
<div class="drawer-item">
4660
<span>开启 Tags-Views</span>
4761
<span class="comp-style">
@@ -103,19 +117,12 @@ const appStore = useAppStore()
103117
const settingsStore = useSettingsStore()
104118
const permissionStore = usePermissionStore()
105119
const showSettings = ref(false);
120+
const navType = ref(settingsStore.navType)
106121
const theme = ref(settingsStore.theme);
107122
const sideTheme = ref(settingsStore.sideTheme);
108123
const storeSettings = computed(() => settingsStore);
109124
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
110125
111-
/** 是否需要topnav */
112-
function topNavChange(val) {
113-
if (!val) {
114-
appStore.toggleSideBarHide(false);
115-
permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
116-
}
117-
}
118-
119126
/** 是否需要dynamicTitle */
120127
function dynamicTitleChange() {
121128
useSettingsStore().setTitle(useSettingsStore().title)
@@ -125,14 +132,40 @@ function themeChange(val) {
125132
settingsStore.theme = val;
126133
handleThemeStyle(val);
127134
}
135+
128136
function handleTheme(val) {
129137
settingsStore.sideTheme = val;
130138
sideTheme.value = val;
131139
}
140+
141+
function handleNavType(val) {
142+
settingsStore.navType = val
143+
navType.value = val
144+
}
145+
146+
/** 菜单导航设置 */
147+
watch(() => navType, val => {
148+
if (val.value == 1) {
149+
appStore.sidebar.opened = true
150+
appStore.toggleSideBarHide(false)
151+
}
152+
if (val.value == 2) {
153+
appStore.sidebar.opened = true
154+
}
155+
if (val.value == 3) {
156+
appStore.sidebar.opened = false
157+
appStore.toggleSideBarHide(true)
158+
}
159+
if ([1, 3].includes(val.value)) {
160+
permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
161+
}
162+
}, { immediate: true, deep: true }
163+
)
164+
132165
function saveSetting() {
133166
proxy.$modal.loading("正在保存到本地，请稍候...");
134167
let layoutSetting = {
135-
"topNav": storeSettings.value.topNav,
168+
"navType": storeSettings.value.navType,
136169
"tagsView": storeSettings.value.tagsView,
137170
"tagsIcon": storeSettings.value.tagsIcon,
138171
"fixedHeader": storeSettings.value.fixedHeader,
@@ -145,11 +178,13 @@ function saveSetting() {
145178
localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
146179
setTimeout(proxy.$modal.closeLoading(), 1000)
147180
}
181+
148182
function resetSetting() {
149183
proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
150184
localStorage.removeItem("layout-setting")
151185
setTimeout("window.location.reload()", 1000)
152186 D306
}
187+
153188
function openSetting() {
154189
showSettings.value = true;
155190
}
@@ -214,4 +249,67 @@ defineExpose({
214249
margin: -3px 8px 0px 0px;
215250
}
216251
}
252+
253+
// 导航模式
254+
.nav-wrap {
255+
display: flex;
256+
justify-content: flex-start;
257+
align-items: center;
258+
margin-top: 10px;
259+
margin-bottom: 20px;
260+
261+
.activeItem {
262+
border: 2px solid var(--el-color-primary) !important;
263+
}
264+
265+
.item {
266+
position: relative;
267+
margin-right: 16px;
268+
cursor: pointer;
269+
width: 56px;
270+
height: 48px;
271+
border-radius: 4px;
272+
background: #f0f2f5;
273+
border: 2px solid transparent;
274+
}
275+
276+
.left {
277+
b:first-child {
278+
display: block;
279+
height: 30%;
280+
background: #fff;
281+
}
282+
b:last-child {
283+
width: 30%;
284+
background: #1b2a47;
285+
position: absolute;
286+
height: 100%;
287+
top: 0;
288+
border-radius: 4px 0 0 4px;
289+
}
290+
}
291+
.mix {
292+
b:first-child {
293+
border-radius: 4px 4px 0 0;
294+
display: block;
295+
height: 30%;
296+
background: #1b2a47;
297+
}
298+
b:last-child {
299+
width: 30%;
300+
background: #1b2a47;
301+
position: absolute;
302+
height: 70%;
303+
border-radius: 0 0 0 4px;
304+
}
305+
}
306+
.top {
307+
b:first-child {
308+
display: block;
309+
height: 30%;
310+
background: #1b2a47;
311+
border-radius: 4px 4px 0 0;
312+
}
313+
}
314+
}
217315
</style>

‎ruoyi-fastapi-frontend/src/layout/components/Sidebar/Logo.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ const getLogoBackground = computed(() => {
3434
if (settingsStore.isDark) {
3535
return 'var(--sidebar-bg)';
3636
}
37+
if (settingsStore.navType == 3) {
38+
return variables.menuLightBg
39+
}
3740
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
3841
});
3942
@@ -42,6 +45,9 @@ const getLogoTextColor = computed(() => {
4245
if (settingsStore.isDark) {
4346
return 'var(--sidebar-text)';
4447
}
48+
if (setti 475E ngsStore.navType == 3) {
49+
return variables.menuLightText
50+
}
4551
return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
4652
});
4753
</script>
@@ -58,7 +64,6 @@ const getLogoTextColor = computed(() => {
5864
5965
.sidebar-logo-container {
6066
position: relative;
61-
width: 100%;
6267
height: 50px;
6368
line-height: 50px;
6469
background: v-bind(getLogoBackground);

0 commit comments

Comments
 (0)
0