feat(响应式): 添加移动端适配支持

- 在Sidebar、Settings、OOBE组件中添加响应式布局处理
- 为移动端优化CSS样式,包括模态框、表格和选择器
- 在数据库切换命令中添加详细的日志记录
- 改进OOBE组件在移动设备上的显示效果
This commit is contained in:
Fox_block
2026-03-22 17:21:26 +08:00
parent eac7b62dc2
commit 63dda3e043
5 changed files with 225 additions and 13 deletions
+86
View File
@@ -124,6 +124,92 @@ select {
padding-top: 14px;
padding-bottom: 14px;
}
.ant-modal {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.ant-modal-content {
height: 100vh !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ant-modal-body {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-modal-wrap {
overflow: hidden !important;
}
.ant-select-dropdown {
max-height: 50vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table-wrapper {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table {
min-width: 600px !important;
}
}
@media (max-width: 480px) {
.ant-modal {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
.ant-modal-content {
height: 100vh !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ant-modal-body {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-modal-wrap {
overflow: hidden !important;
}
.ant-table-container {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table {
min-width: 600px !important;
}
.ant-select-dropdown {
max-height: 50vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
.ss-table-center .ant-table th,