后台“资金流水

frontend/src/styles/base.css

@@ -91,6 +91,7 @@ a {
 .admin-sidebar {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   border-right: 1px solid #dfe5ec;
   background: #111827;
   padding: 20px 16px;
@@ -130,6 +131,7 @@ a {
 
 .admin-workspace {
   min-width: 0;
+  overflow: hidden;
 }
 
 .admin-topbar {
@@ -155,8 +157,13 @@ a {
 }
 
 .admin-main {
+  width: 100%;
   min-width: 0;
-  padding: 28px;
+  padding: 28px clamp(18px, 2.4vw, 36px);
+}
+
+.admin-main .page {
+  max-width: none;
 }
 
 .admin-login-shell {
@@ -231,7 +238,8 @@ a {
 }
 
 .page {
-  max-width: 1120px;
+  width: 100%;
+  max-width: 1440px;
 }
 
 .page-header {
@@ -260,7 +268,7 @@ h1 {
 
 .metric-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 16px;
   margin-top: 28px;
 }
@@ -285,12 +293,12 @@ h1 {
 }
 
 .dashboard-metrics {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
 }
 
 .dashboard-panels {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 16px;
 }
 
@@ -433,6 +441,15 @@ h1 {
   margin-top: 28px;
 }
 
+.table-panel {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-panel .el-table__inner-wrapper {
+  min-width: 760px;
+}
+
 .listing-form {
   max-width: 860px;
   border: 1px solid #e4e7ed;
@@ -448,7 +465,7 @@ h1 {
 }
 
 .order-panel {
-  max-width: 520px;
+  max-width: min(100%, 560px);
   margin-top: 28px;
   border: 1px solid #e4e7ed;
   border-radius: 8px;
@@ -503,6 +520,50 @@ h1 {
   line-height: 1.6;
 }
 
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.filter-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px 16px;
+  margin-top: 24px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 16px;
+}
+
+.filter-panel .el-form-item {
+  margin-bottom: 0;
+}
+
+.table-subtext {
+  display: block;
+  margin-top: 4px;
+  color: #6b7785;
+  font-size: 12px;
+}
+
+.code-panel {
+  max-width: none;
+}
+
+.code-panel pre {
+  overflow-x: auto;
+  margin: 0;
+  border-radius: 6px;
+  background: #111827;
+  color: #dbe4ee;
+  padding: 14px;
+  line-height: 1.6;
+}
+
 .notification-list {
   display: grid;
   gap: 12px;
@@ -551,12 +612,64 @@ h1 {
   justify-content: flex-end;
 }
 
-@media (max-width: 760px) {
-  .app-shell {
+@media (max-width: 1180px) {
+  .admin-shell {
+    grid-template-columns: 220px 1fr;
+  }
+
+  .admin-sidebar {
+    padding: 18px 12px;
+  }
+
+  .admin-nav-link {
+    padding: 0 10px;
+  }
+}
+
+@media (max-width: 900px) {
+  .admin-shell {
     grid-template-columns: 1fr;
   }
 
-  .admin-shell {
+  .admin-sidebar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    border-right: 0;
+    border-bottom: 1px solid #1f2937;
+    padding: 12px 14px;
+  }
+
+  .admin-brand {
+    min-height: 36px;
+  }
+
+  .admin-nav {
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    gap: 8px;
+    margin-top: 12px;
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+
+  .admin-nav-link {
+    min-height: 38px;
+    white-space: nowrap;
+  }
+
+  .admin-topbar {
+    min-height: 58px;
+    padding: 0 16px;
+  }
+
+  .admin-main {
+    padding: 22px 16px;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell {
     grid-template-columns: 1fr;
   }
 
@@ -574,32 +687,10 @@ h1 {
     overflow-x: auto;
   }
 
-  .admin-sidebar {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    border-right: 0;
-    border-bottom: 1px solid #1f2937;
-  }
-
-  .admin-nav {
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
-    overflow-x: auto;
-  }
-
-  .admin-topbar {
-    padding: 0 16px;
-  }
-
   .main {
     padding: 24px 16px;
   }
 
-  .admin-main {
-    padding: 24px 16px;
-  }
-
   .metric-grid {
     grid-template-columns: 1fr;
   }
@@ -615,4 +706,36 @@ h1 {
   .page-header-row {
     display: grid;
   }
+
+  .toolbar-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 520px) {
+  .admin-topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px 16px;
+  }
+
+  .admin-topbar .el-button {
+    width: 100%;
+  }
+
+  .dashboard-panels {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-captcha-row,
+  .code-row {
+    grid-template-columns: 1fr;
+  }
+
+  .captcha-image-button,
+  .captcha-image-button img {
+    width: 100%;
+  }
 }