GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-08-09 16:23:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 style(sql-audit): 调整审计筛选操作按钮布局

Browse Source 
- 将日期范围固定在筛选栏左侧
- 将刷新与重置筛选操作组靠右对齐
- 完善响应式布局并补充样式回归测试
This commit is contained in:
Syngnat
2026-07-23 14:27:01 +08:00
parent e1e65f9698
commit 95992d739a
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/audit/SqlAuditWorkbench.css
View File

@@ -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));
}

15
frontend/src/components/audit/SqlAuditWorkbench.test.tsx
View File

@@ -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');