筛选使用弹窗

src/styles.css

@@ -245,14 +245,30 @@ button {
 }
 
 .filter-panel {
+  width: min(1120px, calc(100vw - 24px));
+  max-height: min(760px, 82vh);
+  display: flex;
+  flex-direction: column;
   background: #fff;
-  margin: -8px 0 20px;
-  border-top: 1px solid #f0f1f4;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 8px 18px rgba(24, 26, 32, 0.05);
+  border-radius: 14px 14px 10px 10px;
+  box-shadow: 0 -12px 32px rgba(24, 26, 32, 0.18);
+  overflow: hidden;
+  animation: sheetUp 0.18s ease-out;
+}
+
+.filter-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 18px 12px;
+  background: rgba(24, 26, 32, 0.28);
 }
 
 .filter-head {
+  flex: none;
   min-height: 48px;
   display: flex;
   align-items: center;
@@ -269,10 +285,12 @@ button {
 }
 
 .filter-body {
+  flex: 1;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px 28px;
   padding: 16px 10px 20px;
+  overflow: auto;
 }
 
 .filter-field,
@@ -340,6 +358,7 @@ button {
 }
 
 .filter-actions {
+  flex: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
@@ -363,6 +382,17 @@ button {
   color: #fff;
 }
 
+@keyframes sheetUp {
+  from {
+    transform: translateY(18px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -600,8 +630,14 @@ button {
     font-size: 14px;
   }
 
+  .filter-overlay {
+    padding: 10px 0 0;
+  }
+
   .filter-panel {
-    margin-top: -10px;
+    width: 100vw;
+    max-height: 86vh;
+    border-radius: 14px 14px 0 0;
   }
 
   .filter-body {