automas_admin/AUTO-MAS-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 修复计划表深色模式异常

Browse Source
This commit is contained in:
DLmaster361
2025-09-17 00:00:16 +08:00
parent 1585ab564d
commit f36d647594
1 changed files with 237 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
frontend/src/views/Plans.vue
View File

@@ -115,7 +115,7 @@
<!-- 配置表格 -->
<div class="config-table-container">
<!-- 配置视图 -->
<div v-if="viewMode === 'config'">
<div v-if="viewMode === 'config'" class="config-table-wrapper">
<a-table
:columns="dynamicTableColumns"
:data-source="tableData"
@@ -123,7 +123,7 @@
:class="['config-table', `mode-${currentMode}`]"
size="middle"
:bordered="true"
:scroll="{ x: false }"
:scroll="{ x: 'max-content' }"
:row-class-name="(record: TableRow) => `task-row-${record.key}`"
>
<template #bodyCell="{ column, record }">
@@ -187,9 +187,9 @@
</a-table>
</div>
<div v-else>
<div v-else class="simple-table-wrapper">
<a-table :columns="dynamicSimpleViewColumns" :data-source="simpleViewData" :pagination="false"
class="simple-table" size="small" :bordered="true">
class="simple-table" size="small" :bordered="true" :scroll="{ x: 'max-content' }">
<template #bodyCell="{ column, record }">
<!-- 全选列 -->
<template v-if="column.key === 'globalControl'">
@@ -1420,8 +1420,13 @@ const disableAllStages = (stageValue: string) => {
font-size: 28px;
}
.config-table-container {
overflow-x: auto;
/* 小屏幕上确保表格能够水平滚动 */
.config-table :deep(.ant-table-content) {
min-width: 800px; /* 最小宽度确保表格内容不会被挤压 */
}
.simple-table :deep(.ant-table-content) {
min-width: 600px;
}
}
@@ -1559,7 +1564,7 @@ const disableAllStages = (stageValue: string) => {
display: none !important;
}
/* 任务名称单元格背景色 */
/* 任务名称单元格背景色 - 浅色主题 */
.config-table :deep(.task-row-MedicineNumb td:first-child) {
background: #EBF4FF !important; /* 不透明的蓝色背景 */
color: #3B82F6;
@@ -1609,6 +1614,56 @@ const disableAllStages = (stageValue: string) => {
background: #E0F2FE !important; /* 悬停时稍深的天蓝色 */
}
/* 任务名称单元格背景色 - 深色主题 */
.dark .config-table :deep(.task-row-MedicineNumb td:first-child) {
background: #1E3A8A !important; /* 深色蓝色背景 */
color: #93C5FD;
font-weight: 500;
}
.dark .config-table :deep(.ant-table-tbody > tr.task-row-MedicineNumb:hover > td:first-child) {
background: #1E40AF !important; /* 悬停时稍亮的蓝色 */
}
.dark .config-table :deep(.task-row-SeriesNumb td:first-child) {
background: #14532D !important; /* 深色绿色背景 */
color: #86EFAC;
font-weight: 500;
}
.dark .config-table :deep(.ant-table-tbody > tr.task-row-SeriesNumb:hover > td:first-child) {
background: #166534 !important; /* 悬停时稍亮的绿色 */
}
.dark .config-table :deep(.task-row-Stage td:first-child) {
background: #7C2D12 !important; /* 深色橙色背景 */
color: #FDBA74;
font-weight: 500;
}
.dark .config-table :deep(.ant-table-tbody > tr.task-row-Stage:hover > td:first-child) {
background: #9A3412 !important; /* 悬停时稍亮的橙色 */
}
.dark .config-table :deep(.task-row-Stage_1 td:first-child),
.dark .config-table :deep(.task-row-Stage_2 td:first-child),
.dark .config-table :deep(.task-row-Stage_3 td:first-child) {
background: #581C87 !important; /* 深色紫色背景 */
color: #C4B5FD;
font-weight: 500;
}
.dark .config-table :deep(.ant-table-tbody > tr.task-row-Stage_1:hover > td:first-child),
.dark .config-table :deep(.ant-table-tbody > tr.task-row-Stage_2:hover > td:first-child),
.dark .config-table :deep(.ant-table-tbody > tr.task-row-Stage_3:hover > td:first-child) {
background: #6B21A8 !important; /* 悬停时稍亮的紫色 */
}
.dark .config-table :deep(.task-row-Stage_Remain td:first-child) {
background: #0C4A6E !important; /* 深色天蓝色背景 */
color: #7DD3FC;
font-weight: 500;
}
.dark .config-table :deep(.ant-table-tbody > tr.task-row-Stage_Remain:hover > td:first-child) {
background: #075985 !important; /* 悬停时稍亮的天蓝色 */
}
/* 确保固定列在滚动时背景不透明 */
.config-table :deep(.ant-table-fixed-left) {
background: var(--ant-color-bg-container) !important;
@@ -1630,11 +1685,27 @@ const disableAllStages = (stageValue: string) => {
}
.config-table :deep(.ant-table-tbody > tr > td.ant-table-fixed-left) {
background: inherit !important;
background: var(--ant-color-bg-container) !important;
border-right: 1px solid var(--ant-color-border-secondary);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
/* 深色主题下确保第一列背景不透明 */
.dark .config-table :deep(.ant-table-thead > tr > th:first-child) {
background: var(--ant-color-bg-container) !important;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
.dark .config-table :deep(.ant-table-tbody > tr > td:first-child) {
background: var(--ant-color-bg-container) !important;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
.dark .config-table :deep(.ant-table-tbody > tr > td.ant-table-fixed-left) {
background: var(--ant-color-bg-container) !important;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
/* 禁用列标题样式 */
.config-table.mode-ALL :deep(.ant-table-thead > tr > th:nth-child(n+3)) {
color: var(--ant-color-text-disabled) !important;
@@ -1780,6 +1851,83 @@ const disableAllStages = (stageValue: string) => {
background: var(--ant-color-bg-container-disabled);
}
/* 简化视图表格滚动条样式 */
.simple-table :deep(.ant-table-content) {
overflow-x: auto;
}
/* 深色主题滚动条样式 - 简化视图 */
.dark .simple-table :deep(.ant-table-content)::-webkit-scrollbar {
height: 8px;
}
.dark .simple-table :deep(.ant-table-content)::-webkit-scrollbar-track {
background: var(--ant-color-bg-layout);
border-radius: 4px;
}
.dark .simple-table :deep(.ant-table-content)::-webkit-scrollbar-thumb {
background: var(--ant-color-border);
border-radius: 4px;
transition: background 0.2s ease;
}
.dark .simple-table :deep(.ant-table-content)::-webkit-scrollbar-thumb:hover {
background: var(--ant-color-text-tertiary);
}
/* 浅色主题滚动条样式 - 简化视图 */
.simple-table :deep(.ant-table-content)::-webkit-scrollbar {
height: 8px;
}
.simple-table :deep(.ant-table-content)::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
.simple-table :deep(.ant-table-content)::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 4px;
transition: background 0.2s ease;
}
.simple-table :deep(.ant-table-content)::-webkit-scrollbar-thumb:hover {
background: #bfbfbf;
}
/* Firefox 滚动条样式 - 简化视图 */
.dark .simple-table :deep(.ant-table-content) {
scrollbar-width: thin;
scrollbar-color: var(--ant-color-border) var(--ant-color-bg-layout);
}
.simple-table :deep(.ant-table-content) {
scrollbar-width: thin;
scrollbar-color: #d9d9d9 #f5f5f5;
}
/* 确保简化视图固定列正确显示 */
.simple-table :deep(.ant-table-thead > tr > th.ant-table-fixed-left) {
background: var(--ant-color-bg-container) !important;
border-right: 1px solid var(--ant-color-border);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.simple-table :deep(.ant-table-tbody > tr > td.ant-table-fixed-left) {
background: var(--ant-color-bg-container) !important;
border-right: 1px solid var(--ant-color-border-secondary);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.dark .simple-table :deep(.ant-table-thead > tr > th.ant-table-fixed-left) {
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
.dark .simple-table :deep(.ant-table-tbody > tr > td.ant-table-fixed-left) {
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
/* 拖拽视觉反馈 */
.simple-table :deep(.ant-table-row.drag-over) {
border-top: 2px solid var(--ant-color-primary);
@@ -1788,4 +1936,85 @@ const disableAllStages = (stageValue: string) => {
.simple-table :deep(.ant-table-row.dragging) {
opacity: 0.5;
}
/* 水平滚动条样式 */
.config-table-container {
/* 移除容器的滚动，让Ant Design表格自己处理 */
width: 100%;
}
.config-table-wrapper {
/* 移除wrapper的滚动，避免双滚动条 */
width: 100%;
}
.simple-table-wrapper {
/* 移除wrapper的滚动，避免双滚动条 */
width: 100%;
}
/* 为配置表格添加更好的滚动条样式 */
.config-table :deep(.ant-table-content) {
/* 让Ant Design表格自己处理滚动 */
overflow-x: auto;
}
/* 深色主题滚动条样式 - 针对表格内容区域 */
.dark .config-table :deep(.ant-table-content)::-webkit-scrollbar {
height: 8px;
}
.dark .config-table :deep(.ant-table-content)::-webkit-scrollbar-track {
background: var(--ant-color-bg-layout);
border-radius: 4px;
}
.dark .config-table :deep(.ant-table-content)::-webkit-scrollbar-thumb {
background: var(--ant-color-border);
border-radius: 4px;
transition: background 0.2s ease;
}
.dark .config-table :deep(.ant-table-content)::-webkit-scrollbar-thumb:hover {
background: var(--ant-color-text-tertiary);
}
/* 浅色主题滚动条样式 - 针对表格内容区域 */
.config-table :deep(.ant-table-content)::-webkit-scrollbar {
height: 8px;
}
.config-table :deep(.ant-table-content)::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
.config-table :deep(.ant-table-content)::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 4px;
transition: background 0.2s ease;
}
.config-table :deep(.ant-table-content)::-webkit-scrollbar-thumb:hover {
background: #bfbfbf;
}
/* 确保表格在小屏幕上能够水平滚动 */
@media (max-width: 1200px) {
.config-table-container {
/* 移除重复的overflow-x，避免双滚动条 */
-webkit-overflow-scrolling: touch;
}
}
/* Firefox 滚动条样式 - 针对表格内容区域 */
.dark .config-table :deep(.ant-table-content) {
scrollbar-width: thin;
scrollbar-color: var(--ant-color-border) var(--ant-color-bg-layout);
}
.config-table :deep(.ant-table-content) {
scrollbar-width: thin;
scrollbar-color: #d9d9d9 #f5f5f5;
}
</style>