Skip to content

Commit b3297ab

Browse files
lanshuizhiyuelanshuizhiyue
committed
style: 优化前端样式和组件布局
- 更新全局样式 index.scss - 优化 GuidedParamEditor 和 GuidedParamEditorDialog 组件 - 调整 Config 页面各面板样式 - 优化 TaskDetail 页面组件布局和样式 - 更新 session-headers.scss 样式
1 parent 66c4929 commit b3297ab

15 files changed

Lines changed: 150 additions & 110 deletions

File tree

‎src/frontEnd/src/assets/styles/index.scss‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,15 @@
6969
}
7070
}
7171

72+
// ==================== PrimeVue Tab 组件全局对齐 ====================
73+
// PrimeVue v4 不为 Tab 内自定义内容提供默认 flex 布局
74+
// 参考官方 Template 示例: class="flex items-center gap-2"
75+
.p-tab {
76+
display: flex;
77+
align-items: center;
78+
gap: 0.5rem;
79+
}
80+
7281
// ==================== 暗色模式样式 ====================
7382

7483
// DataTable 组件暗色模式样式
@@ -251,7 +260,7 @@
251260
}
252261

253262
.app-dark .p-toggleswitch-checked .p-toggleswitch-handle {
254-
background: #ffffff !important;
263+
background: var(--p-primary-contrast-color) !important;
255264
}
256265

257266
// Button 暗色模式修复
@@ -284,7 +293,7 @@
284293

285294
.app-dark .p-tab.p-tab-active {
286295
background: var(--p-primary-color) !important;
287-
color: white !important;
296+
color: var(--p-primary-contrast-color) !important;
288297
}
289298

290299
// 扫描配置页面面板暗色模式
@@ -472,6 +481,22 @@
472481
border-color: var(--p-surface-700) !important;
473482
}
474483

484+
// GuidedParamEditorDialog 配置表单区域暗色模式
485+
.app-dark .preset-info-form {
486+
background: var(--p-surface-800) !important;
487+
border-color: var(--p-surface-700) !important;
488+
489+
.p-inputtext {
490+
background: var(--p-surface-900) !important;
491+
border-color: var(--p-surface-600) !important;
492+
color: var(--p-surface-0) !important;
493+
494+
&::placeholder {
495+
color: var(--p-surface-400) !important;
496+
}
497+
}
498+
}
499+
475500
// DatePicker 暗色模式样式 - 面板是 teleport 到 body 的
476501
.app-dark .p-datepicker {
477502
background: var(--p-surface-900);

‎src/frontEnd/src/components/GuidedParamEditor.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -660,7 +660,7 @@ watch(() => props.initialParams, (newVal) => {
660660
.cli-value {
661661
font-family: 'Consolas', monospace;
662662
font-size: 13px;
663-
color: #27ae60;
663+
color: var(--p-green-500);
664664
}
665665
}
666666
@@ -673,30 +673,30 @@ watch(() => props.initialParams, (newVal) => {
673673
}
674674
675675
.preview-section {
676-
background: #1e1e1e;
676+
background: var(--p-surface-900);
677677
border-radius: 8px;
678678
overflow: hidden;
679679
680680
.section-title {
681-
color: #d4d4d4;
682-
background: #2d2d2d;
681+
color: var(--p-surface-0);
682+
background: var(--p-surface-800);
683683
margin: 0;
684684
padding: 10px 14px;
685-
border-bottom: 1px solid #3d3d3d;
685+
border-bottom: 1px solid var(--p-surface-700);
686686
}
687687
688688
.command-preview {
689689
padding: 14px;
690690
font-family: 'Consolas', 'Monaco', monospace;
691691
font-size: 13px;
692692
line-height: 1.8;
693-
color: #d4d4d4;
693+
color: var(--p-surface-0);
694694
min-height: 50px;
695695
696-
:deep(.param) { color: #2980b9; font-weight: bold; }
697-
:deep(.value) { color: #27ae60; font-weight: bold; }
698-
:deep(.flag) { color: #8e44ad; font-weight: bold; }
699-
:deep(.empty) { color: #888; font-style: italic; }
696+
:deep(.param) { color: var(--p-blue-400); font-weight: bold; }
697+
:deep(.value) { color: var(--p-green-400); font-weight: bold; }
698+
:deep(.flag) { color: var(--p-purple-400); font-weight: bold; }
699+
:deep(.empty) { color: var(--p-surface-400); font-style: italic; }
700700
}
701701
}
702702

‎src/frontEnd/src/components/GuidedParamEditorDialog.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,15 +162,15 @@ defineExpose({
162162
gap: 6px;
163163
min-width: 100px;
164164
font-size: 13px;
165-
color: var(--text-color-secondary);
165+
color: var(--p-text-muted-color);
166166
167167
i {
168-
color: var(--primary-color);
168+
color: var(--p-primary-color);
169169
font-size: 14px;
170170
}
171171
172172
.required {
173-
color: #ef4444;
173+
color: var(--p-red-500);
174174
}
175175
}
176176
@@ -181,6 +181,22 @@ defineExpose({
181181
}
182182
}
183183
184+
// 暗色模式适配
185+
:global(.app-dark) .preset-info-form {
186+
background: var(--p-surface-800);
187+
border-color: var(--p-surface-700);
188+
189+
:deep(.p-inputtext) {
190+
background: var(--p-surface-900) !important;
191+
border-color: var(--p-surface-600) !important;
192+
color: var(--p-surface-0) !important;
193+
194+
&::placeholder {
195+
color: var(--p-surface-400) !important;
196+
}
197+
}
198+
}
199+
184200
.dialog-footer {
185201
display: flex;
186202
justify-content: flex-end;

‎src/frontEnd/src/views/Config/components/DefaultConfigPanel.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ onMounted(async () => {
338338
339339
.param-desc {
340340
font-size: 12px;
341-
color: var(--p-text-color)-secondary;
341+
color: var(--p-text-muted-color);
342342
}
343343
344344
.checkbox-label {
@@ -361,7 +361,7 @@ onMounted(async () => {
361361
}
362362
363363
.technique-display {
364-
background: var(--p-surface-200) !important;
364+
background: var(--p-surface-section) !important;
365365
}
366366
367367
.technique-checkboxes {
@@ -402,7 +402,7 @@ onMounted(async () => {
402402
403403
.source-desc {
404404
font-size: 12px;
405-
color: var(--p-text-color)-secondary;
405+
color: var(--p-text-muted-color);
406406
margin-left: 28px;
407407
margin-bottom: 8px;
408408
}
@@ -431,7 +431,7 @@ onMounted(async () => {
431431
432432
.option-desc {
433433
font-size: 12px;
434-
color: var(--p-text-color)-secondary;
434+
color: var(--p-text-muted-color);
435435
margin-left: 28px;
436436
margin-top: 4px;
437437
}
@@ -443,7 +443,7 @@ onMounted(async () => {
443443
justify-content: center;
444444
gap: 16px;
445445
padding: 12px;
446-
background: rgba(248, 250, 252, 0.5);
446+
background: var(--p-surface-section);
447447
border-radius: var(--p-border-radius);
448448
449449
.persist-option {
@@ -458,43 +458,43 @@ onMounted(async () => {
458458
}
459459
460460
.preview-section {
461-
background: #1e1e1e;
461+
background: var(--p-surface-900);
462462
border-radius: var(--p-border-radius);
463463
overflow: hidden;
464464
465465
.section-title {
466-
color: #d4d4d4;
467-
background: #2d2d2d;
466+
color: var(--p-surface-0);
467+
background: var(--p-surface-800);
468468
margin: 0;
469469
padding: 12px 16px;
470-
border-bottom: 1px solid #3d3d3d;
470+
border-bottom: 1px solid var(--p-surface-700);
471471
}
472472
473473
.command-preview {
474474
padding: 16px;
475475
font-family: 'Consolas', 'Monaco', monospace;
476476
font-size: 13px;
477477
line-height: 1.8;
478-
color: #d4d4d4;
478+
color: var(--p-surface-0);
479479
min-height: 60px;
480480
481481
:deep(.param) {
482-
color: #2980b9;
482+
color: var(--p-blue-400);
483483
font-weight: bold;
484484
}
485485
486486
:deep(.value) {
487-
color: #27ae60;
487+
color: var(--p-green-400);
488488
font-weight: bold;
489489
}
490490
491491
:deep(.flag) {
492-
color: #8e44ad;
492+
color: var(--p-purple-400);
493493
font-weight: bold;
494494
}
495495
496496
:deep(.empty) {
497-
color: #888;
497+
color: var(--p-surface-400);
498498
}
499499
}
500500
}

‎src/frontEnd/src/views/Config/components/HistoryConfigPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ onMounted(() => {
309309
310310
.options-label {
311311
font-size: 13px;
312-
color: var(--p-text-color)-secondary;
312+
color: var(--p-text-muted-color);
313313
}
314314
315315
.checkbox-text {
@@ -340,7 +340,7 @@ onMounted(() => {
340340
font-family: 'Consolas', 'Monaco', monospace;
341341
font-size: 12px;
342342
color: var(--p-text-color);
343-
background: var(--p-surface-200);
343+
background: var(--p-surface-section);
344344
padding: 2px 6px;
345345
border-radius: 4px;
346346
}
@@ -350,7 +350,7 @@ onMounted(() => {
350350
align-items: center;
351351
justify-content: space-between;
352352
padding: 10px 12px;
353-
background: var(--p-surface-200);
353+
background: var(--p-surface-section);
354354
border-radius: var(--p-border-radius);
355355
356356
.left-buttons, .right-buttons {
@@ -360,7 +360,7 @@ onMounted(() => {
360360
361361
.status-text {
362362
font-size: 13px;
363-
color: var(--p-text-color)-secondary;
363+
color: var(--p-text-muted-color);
364364
}
365365
}
366366
</style>

‎src/frontEnd/src/views/Config/components/PresetConfigPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ onMounted(() => {
543543
flex-wrap: wrap;
544544
545545
.separator {
546-
color: #ccc;
546+
color: var(--p-surface-400);
547547
margin: 0 4px;
548548
}
549549
}
@@ -568,7 +568,7 @@ onMounted(() => {
568568
font-family: 'Consolas', 'Monaco', monospace;
569569
font-size: 12px;
570570
color: var(--p-text-color);
571-
background: var(--p-surface-200);
571+
background: var(--p-surface-section);
572572
padding: 2px 6px;
573573
border-radius: 4px;
574574
}
@@ -577,7 +577,7 @@ onMounted(() => {
577577
font-size: 13px;
578578
color: var(--p-text-muted-color);
579579
padding: 8px 12px;
580-
background: var(--p-surface-200);
580+
background: var(--p-surface-section);
581581
border-radius: var(--p-border-radius);
582582
}
583583
@@ -594,7 +594,7 @@ onMounted(() => {
594594
label {
595595
font-size: 13px;
596596
font-weight: 500;
597-
color: var(--p-text-color)-secondary;
597+
color: var(--p-text-muted-color);
598598
}
599599
}
600600
}

‎src/frontEnd/src/views/Config/components/ScanPresetConfig.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,16 @@ async function copyCommand() {
171171
}
172172
173173
&:hover {
174-
background: rgba(99, 102, 241, 0.1);
174+
background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
175175
}
176176
}
177177
178178
.p-tab[data-p-active="true"] {
179179
background: var(--p-primary-color);
180-
color: white;
180+
color: var(--p-primary-contrast-color);
181181
182182
i {
183-
color: white;
183+
color: var(--p-primary-contrast-color);
184184
}
185185
}
186186
@@ -192,8 +192,8 @@ async function copyCommand() {
192192
193193
.preview-content {
194194
.command-preview {
195-
background: #1e1e1e;
196-
color: #d4d4d4;
195+
background: var(--p-surface-900);
196+
color: var(--p-surface-0);
197197
padding: 16px;
198198
border-radius: var(--p-border-radius);
199199
font-family: 'Consolas', 'Monaco', monospace;

‎src/frontEnd/src/views/Config/components/SessionHeaders/session-headers.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@
241241
.p-dialog-footer {
242242
padding: 1.5rem 2rem 2rem 2rem !important;
243243
border-top: 1px solid var(--surface-border);
244-
background: var(--surface-50);
244+
background: var(--p-surface-ground);
245245
display: flex;
246246
gap: 0.75rem;
247247
justify-content: flex-end;
@@ -465,14 +465,14 @@
465465

466466
.info-card {
467467
.format-code {
468-
background: var(--blue-50);
469-
color: var(--blue-700);
468+
background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
469+
color: var(--p-primary-color);
470470
padding: 0.25rem 0.5rem;
471471
border-radius: 4px;
472472
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
473473
font-size: 0.875rem;
474474
font-weight: 500;
475-
border: 1px solid var(--blue-200);
475+
border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, transparent);
476476
}
477477

478478
ul {

‎src/frontEnd/src/views/Layout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ onUnmounted(() => {
260260
display: flex;
261261
flex-direction: column;
262262
align-items: center;
263-
gap: 0.25rem;
263+
gap: 0.375rem;
264264
padding: 0.5rem 1rem;
265265
color: var(--p-text-secondary-color);
266266
}

0 commit comments

Comments
 (0)