From 95992d739a5b10943f3c339d21add396b20df655 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Thu, 23 Jul 2026 14:27:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(sql-audit):=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=AE=A1=E8=AE=A1=E7=AD=9B=E9=80=89=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将日期范围固定在筛选栏左侧
- 将刷新与重置筛选操作组靠右对齐
- 完善响应式布局并补充样式回归测试
---
 .../components/audit/SqlAuditWorkbench.css    | 22 +++++++++++--------
 .../audit/SqlAuditWorkbench.test.tsx          | 15 +++++++++++++
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/audit/SqlAuditWorkbench.css b/frontend/src/components/audit/SqlAuditWorkbench.css
index d68aaa2f..1f55556d 100644
--- a/frontend/src/components/audit/SqlAuditWorkbench.css
+++ b/frontend/src/components/audit/SqlAuditWorkbench.css
@@ -95,14 +95,15 @@
 
 .gn-sql-audit-filter-time {
   display: grid;
-  grid-column: span 2;
+  grid-column: 1 / span 2;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
 .gn-sql-audit-toolbar-actions {
   display: flex;
-  grid-column: span 2;
+  grid-column: -3 / -1;
+  align-items: center;
   justify-content: flex-end;
   gap: 8px;
 }
@@ -350,14 +351,21 @@
   font-size: 12px;
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 1600px) {
   .gn-sql-audit-toolbar {
     grid-template-columns: repeat(4, minmax(150px, 1fr));
   }
+}
+
+@media (max-width: 1100px) {
+  .gn-sql-audit-toolbar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
   .gn-sql-audit-filter-search,
-  .gn-sql-audit-filter-time {
-    grid-column: span 2;
+  .gn-sql-audit-filter-time,
+  .gn-sql-audit-toolbar-actions {
+    grid-column: 1 / -1;
   }
 }
 
@@ -373,10 +381,6 @@
     flex-direction: column;
   }
 
-  .gn-sql-audit-toolbar {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .gn-sql-audit-summary {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/frontend/src/components/audit/SqlAuditWorkbench.test.tsx b/frontend/src/components/audit/SqlAuditWorkbench.test.tsx
index da89d56c..62f0e9be 100644
--- a/frontend/src/components/audit/SqlAuditWorkbench.test.tsx
+++ b/frontend/src/components/audit/SqlAuditWorkbench.test.tsx
@@ -83,6 +83,21 @@ describe('SqlAuditWorkbench', () => {
     );
   });
 
+  it('anchors filter actions opposite the time range instead of leaving them in the middle', () => {
+    const styleSource = readFileSync(new URL('./SqlAuditWorkbench.css', import.meta.url), 'utf8');
+
+    expect(styleSource).toMatch(
+      /\.gn-sql-audit-filter-time\s*\{[^}]*grid-column:\s*1 \/ span 2;/,
+    );
+    expect(styleSource).toMatch(
+      /\.gn-sql-audit-toolbar-actions\s*\{[^}]*grid-column:\s*-3 \/ -1;[^}]*justify-content:\s*flex-end;/,
+    );
+    expect(styleSource).toMatch(
+      /@media \(max-width: 1100px\)[\s\S]*?\.gn-sql-audit-filter-search,[\s\S]*?\.gn-sql-audit-toolbar-actions\s*\{[^}]*grid-column:\s*1 \/ -1;/,
+    );
+    expect(styleSource).toContain('@media (max-width: 1600px)');
+  });
+
   it('keeps the fixed action column opaque while rows are hovered', () => {
     const styleSource = readFileSync(new URL('./SqlAuditWorkbench.css', import.meta.url), 'utf8');