feat: smooth report refresh and redesign system settings mobile UI

admin-frontend/src/style.css

@@ -205,3 +205,65 @@ a {
     justify-content: flex-start;
   }
 }
+
+@media (max-width: 900px) {
+  .toolbar {
+    width: 100%;
+  }
+
+  .toolbar > * {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-page-title > div {
+    width: 100%;
+  }
+
+  .app-page-title .toolbar {
+    width: 100%;
+  }
+
+  .toolbar > * {
+    flex: 1 1 calc(50% - 6px);
+  }
+
+  .toolbar .el-button,
+  .toolbar .el-select,
+  .toolbar .el-input,
+  .toolbar .el-input-number {
+    width: 100% !important;
+  }
+
+  .section-head {
+    align-items: flex-start;
+  }
+
+  .section-head > * {
+    width: 100%;
+  }
+
+  .table-wrap {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-wrap .el-table {
+    min-width: 700px;
+  }
+
+  .el-pagination {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 520px) {
+  .toolbar > * {
+    flex-basis: 100%;
+  }
+
+  .table-wrap .el-table {
+    min-width: 620px;
+  }
+}