Admin/fquiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat]:[FL-177][系统表格边框优化]

Browse Source 
优化了系统中所有表格的边框样式，确保边框与背景色有明显区分：

1. 新增 CSS 变量 --fquiz-table-border-color 用于统一管理表格边框颜色
2. 为浅色主题设置明显的紫色系边框色 (#d4c5ff)
3. 为暗色主题设置混合色边框，提升对比度
4. 添加全局表格边框样式规则，覆盖所有 Ant Design Table 组件：
   - 表格外边框
   - 表头单元格边框
   - 表体单元格边框
   - 行列边框分隔线
5. 保持视觉一致性，符合现有紫色主题设计规范

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
chengkai3
2026-06-22 00:04:24 +08:00
parent 9c907efb3e
commit 10c673461b
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/globals.css
+38
View File
@@ -86,6 +86,7 @@
--fquiz-theme-shadow-card: 0 10px 24px color-mix(in srgb, var(--accent-9) 22%, transparent);
--fquiz-theme-shadow-soft: 0 2px 8px color-mix(in srgb, var(--accent-9) 12%, transparent);
--fquiz-table-border-color: #d4c5ff;
}
:root[data-fquiz-theme="dark"] {
@@ -95,6 +96,7 @@
--fquiz-theme-shell-header-bg: color-mix(in srgb, var(--ant-color-bg-container) 82%, black);
--fquiz-theme-shell-sider-bg: color-mix(in srgb, var(--ant-color-bg-container) 82%, black);
--fquiz-theme-shadow-card: 0 10px 24px color-mix(in srgb, black 50%, transparent);
--fquiz-table-border-color: color-mix(in srgb, var(--ant-color-border-secondary) 80%, var(--accent-9) 20%);
}
:root[data-fquiz-theme="dark"] .admin-users-user-card,
@@ -1551,3 +1553,39 @@ body {
padding: 16px;
}
}
/* 表格边框优化 - 确保边框与背景色有明显区分 */
.ant-table-wrapper .ant-table {
border: 1px solid var(--fquiz-table-border-color);
}
.ant-table-wrapper .ant-table-thead > tr > th {
border-bottom: 1px solid var(--fquiz-table-border-color);
border-right: 1px solid var(--fquiz-table-border-color);
}
.ant-table-wrapper .ant-table-thead > tr > th:last-child {
border-right: none;
}
.ant-table-wrapper .ant-table-tbody > tr > td {
border-bottom: 1px solid var(--fquiz-table-border-color);
border-right: 1px solid var(--fquiz-table-border-color);
}
.ant-table-wrapper .ant-table-tbody > tr > td:last-child {
border-right: none;
}
.ant-table-wrapper .ant-table-tbody > tr:last-child > td {
border-bottom: none;
}
.ant-table-wrapper .ant-table.ant-table-bordered .ant-table-container {
border: 1px solid var(--fquiz-table-border-color);
}
.ant-table-wrapper .ant-table.ant-table-bordered .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table.ant-table-bordered .ant-table-tbody > tr > td {
border-right: 1px solid var(--fquiz-table-border-color);
}