Skip to content

Commit 32714ad

Browse files
DataEraserCDataEraserC
committed
feat(ui):适配移动端底部导航栏
- 调整侧边栏在移动设备上显示在底部 - 修改导航项布局为水平排列并居中对齐 - 隐藏侧边栏切换按钮 - 优化导航链接样式以适应底部显示 - 添加窗口大小变化监听以动态调整布局 - 调整主内容区域底部边距避免被导航栏遮挡 - 在小屏幕设备上进一步优化导航项尺寸和字体 - 点击导航项时在移动设备上自动滚动到顶部
1 parent a2716ca commit 32714ad

3 files changed

Lines changed: 98 additions & 29 deletions

File tree

‎file_classification_webapi/static/js/main.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ document.addEventListener('DOMContentLoaded', function () {
6767

6868
// 初始化侧边栏切换功能
6969
waitForSidebarToggle();
70+
71+
// 移动端底部导航适配
72+
handleMobileBottomNav();
7073
});
7174

7275
function initTabs() {
@@ -108,6 +111,11 @@ function initTabs() {
108111
if (target !== 'home') {
109112
autoSearch(target);
110113
}
114+
115+
// 在移动设备上，点击导航项后滚动到内容顶部
116+
if (window.innerWidth <= 768) {
117+
window.scrollTo({ top: 0, behavior: 'smooth' });
118+
}
111119
});
112120
});
113121
}
@@ -202,4 +210,31 @@ function initSidebarToggle() {
202210
// 触发窗口大小调整事件，确保响应式设计正常工作
203211
window.dispatchEvent(new Event('resize'));
204212
});
213+
}
214+
215+
// 处理移动端底部导航
216+
function handleMobileBottomNav() {
217+
// 检测是否为移动设备
218+
const isMobile = window.innerWidth <= 768;
219+
220+
if (isMobile) {
221+
const sidebar = document.querySelector('.sidebar');
222+
// 确保侧边栏在底部
223+
sidebar.style.position = 'fixed';
224+
sidebar.style.bottom = '0';
225+
sidebar.style.top = 'auto';
226+
227+
// 监听窗口大小变化
228+
window.addEventListener('resize', function() {
229+
const currentSidebar = document.querySelector('.sidebar');
230+
if (window.innerWidth <= 768) {
231+
currentSidebar.style.position = 'fixed';
232+
currentSidebar.style.bottom = '0';
233+
currentSidebar.style.top = 'auto';
234+
} else {
235+
currentSidebar.style.position = '';
236+
currentSidebar.style.bottom = '';
237+
}
238+
});
239+
}
205240
}

‎file_classification_webapi/static/partials/sidebar.html‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
11
<!-- 侧边栏 -->
22
<aside class="sidebar">
3-
<div class="sidebar-toggle" id="sidebarToggle">
4-
<span class="toggle-icon">≡</span>
5-
</div>
63
<nav>
74
<ul>
85
<li><a class="nav-link active" data-target="home" href="#home" title="系统主页">
9-
<span class="nav-text">系统主页</span>
106
<span class="nav-icon">🏠</span>
7+
<span class="nav-text">系统主页</span>
118
</a></li>
129
<li><a class="nav-link" data-target="files" href="#files" title="文件管理">
13-
<span class="nav-text">文件管理</span>
1410
<span class="nav-icon">📁</span>
11+
<span class="nav-text">文件管理</span>
1512
</a></li>
1613
<li><a class="nav-link" data-target="groups" href="#groups" title="组管理">
17-
<span class="nav-text">组管理</span>
1814
<span class="nav-icon">📂</span>
15+
<span class="nav-text">组管理</span>
1916
</a></li>
2017
<li><a class="nav-link" data-target="tags" href="#tags" title="标签管理">
21-
<span class="nav-text">标签管理</span>
2218
<span class="nav-icon">🏷️</span>
19+
<span class="nav-text">标签管理</span>
2320
</a></li>
2421
<li><a class="nav-link" data-target="file-groups" href="#file-groups" title="文件组关联">
25-
<span class="nav-text">文件组关联</span>
2622
<span class="nav-icon">🔗</span>
23+
<span class="nav-text">文件组关联</span>
2724
</a></li>
2825
<li><a class="nav-link" data-target="group-tags" href="#group-tags" title="组标签关联">
29-
<span class="nav-text">组标签关联</span>
3026
<span class="nav-icon">🔖</span>
27+
<span class="nav-text">组标签关联</span>
3128
</a></li>
3229
<li><a class="nav-link" data-target="group-relations" href="#group-relations" title="组关系管理">
33-
<span class="nav-text">组关系管理</span>
3430
<span class="nav-icon">🔄</span>
31+
<span class="nav-text">组关系管理</span>
3532
</a></li>
3633
</ul>
3734
</nav>

‎file_classification_webapi/static/styles.css‎

Lines changed: 56 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1071,44 +1071,78 @@ body.dark-mode .pagination-size select:focus {
10711071
flex-direction: column;
10721072
}
10731073

1074+
/* 方案1: 底部导航栏 */
10741075
.sidebar {
10751076
width: 100%;
10761077
padding: 0;
1078+
position: fixed;
1079+
bottom: 0;
1080+
left: 0;
1081+
right: 0;
1082+
height: auto;
1083+
z-index: 1000;
10771084
}
10781085

10791086
.sidebar.collapsed {
10801087
width: 100%;
10811088
}
10821089

1090+
.sidebar-toggle {
1091+
display: none;
1092+
}
1093+
1094+
.sidebar nav {
1095+
padding: 0;
1096+
}
1097+
10831098
.sidebar ul {
10841099
display: flex;
1085-
flex-wrap: wrap;
1086-
justify-content: center;
1100+
flex-direction: row;
1101+
justify-content: space-around;
1102+
align-items: center;
1103+
width: 100%;
1104+
margin: 0;
1105+
padding: 0;
10871106
}
10881107

10891108
.sidebar ul li {
10901109
margin: 0;
1110+
flex: 1;
10911111
}
10921112

10931113
.sidebar ul li a {
1094-
padding: 0.75rem;
1095-
border-bottom: 1px solid #495057;
1114+
padding: 1rem 0.5rem;
1115+
border-bottom: none;
10961116
border-left: none;
10971117
text-align: center;
1098-
min-width: 100px;
1099-
justify-content: center;
1118+
flex-direction: column;
1119+
font-size: 0.8rem;
1120+
min-height: 60px;
11001121
}
11011122

11021123
.sidebar.collapsed ul li a {
1103-
padding: 0.75rem;
1124+
padding: 1rem 0.5rem;
11041125
}
11051126

11061127
.nav-text {
1107-
display: inline;
1128+
display: block;
1129+
font-size: 0.7rem;
1130+
margin-top: 0.25rem;
1131+
margin-left: 0;
1132+
}
1133+
1134+
.nav-icon {
1135+
margin-left: 0;
1136+
font-size: 1.2rem;
11081137
}
11091138

11101139
.sidebar.collapsed .nav-text {
1111-
display: none;
1140+
display: block;
1141+
}
1142+
1143+
/* 调整主内容区域，避免被底部导航栏遮挡 */
1144+
.content {
1145+
margin-bottom: 60px;
11121146
}
11131147

11141148
.search-form .form-row {
@@ -1144,20 +1178,23 @@ body.dark-mode .pagination-size select:focus {
11441178
}
11451179

11461180
@media (max-width: 480px) {
1147-
.sidebar ul {
1148-
flex-direction: column;
1181+
/* 在小屏幕上进一步优化 */
1182+
.sidebar ul li a {
1183+
padding: 0.75rem 0.25rem;
1184+
min-height: 50px;
1185+
font-size: 0.7rem;
11491186
}
11501187

1151-
.sidebar ul li a {
1152-
border-left: 3px solid transparent;
1153-
border-bottom: 1px solid #495057;
1154-
text-align: left;
1155-
min-width: auto;
1188+
.nav-icon {
1189+
font-size: 1rem;
1190+
}
1191+
1192+
.nav-text {
1193+
font-size: 0.6rem;
11561194
}
11571195

1158-
.sidebar ul li a.active {
1159-
border-left: 3px solid #ffc107;
1160-
border-bottom: 1px solid #495057;
1196+
.content {
1197+
margin-bottom: 50px;
11611198
}
11621199

11631200
.toolbar button {

0 commit comments

Comments
 (0)