qiaoxinjiu/effekt-interface-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(case): AI 用例详情弹窗深浅色主题可读性

Browse Source 
为 append-to-body 详情弹窗增加独立样式，修复标题、标签与描述列表在浅色/服务器环境下的对比度。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
qiaoxinjiu
2026-05-18 17:05:45 +08:00
parent 971967b791
commit 793a8e1b84
1 changed files with 118 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/TestPlatform/Case/CaseList.vue
View File

@@ -588,6 +588,7 @@
width="760px"
top="6vh"
append-to-body
custom-class="case-ai-detail-dialog"
@closed="resetAiCaseDetailDialog">
<div v-loading="aiCaseDetailLoading" class="ai-case-detail-wrap">
<template v-if="!aiCaseDetailLoading && aiCaseDetailRowPresent">
@@ -2539,7 +2540,6 @@ export default {
.ai-case-detail-title {
font-size: 16px;
font-weight: 600;
color: #f8fafc;
line-height: 1.4;
margin-bottom: 14px;
}
@@ -2555,20 +2555,16 @@ export default {
.ai-case-detail-label {
font-size: 13px;
font-weight: 600;
color: #cbd5e1;
margin-bottom: 6px;
}
.ai-case-detail-text {
font-size: 13px;
color: #e5e7eb;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
padding: 10px 12px;
background: #0f172a;
border-radius: 4px;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.ai-case-detail-empty {
@@ -2790,4 +2786,121 @@ body.theme-light .page-wrap .el-date-editor .el-range-input {
body.theme-light .page-wrap .el-date-editor .el-range-separator {
color: #909399;
}
/* AI 用例详情弹窗（append-to-body） */
.el-dialog.case-ai-detail-dialog {
background: #111827;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .el-dialog__header {
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.el-dialog.case-ai-detail-dialog .el-dialog__title {
color: #f8fafc;
}
.el-dialog.case-ai-detail-dialog .el-dialog__body {
color: #e5e7eb;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-title {
color: #f8fafc;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-label {
color: #dbeafe;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-text {
color: #e5e7eb;
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-empty {
color: #94a3b8;
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body {
background-color: #111827;
color: #e5e7eb;
}
.el-dialog.case-ai-detail-dialog .el-descriptions-item__label {
color: #94a3b8;
background: #1f2937;
}
.el-dialog.case-ai-detail-dialog .el-descriptions-item__content {
color: #e5e7eb;
background: #111827;
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions__table {
border-color: rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions-item__cell {
border-color: rgba(148, 163, 184, 0.2);
}
body.theme-light .el-dialog.case-ai-detail-dialog {
background: #ffffff;
border-color: #e5e7eb;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__header {
border-bottom-color: #ebeef5;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__title {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__body {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-title {
color: #0f172a;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-label {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-text {
color: #334155;
background: #f8fafc;
border: 1px solid #e5e7eb;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-empty {
color: #909399;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body {
background-color: #ffffff;
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions-item__label {
color: #606266;
background: #fafafa;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions-item__content {
color: #303133;
background: #ffffff;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions__table {
border-color: #ebeef5;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions-item__cell {
border-color: #ebeef5;
}
</style>