kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(components): 统一组件样式使用CSS变量替换硬编码颜色

Browse Source 
将多个组件中的硬编码颜色值替换为CSS变量，提高主题一致性和可维护性
This commit is contained in:
Wenjie Zhang 2025-12-23 02:02:12 +08:00
parent dede6679db
commit ccf6ddaaeb
4 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/AttachmentInputPanel.vue
View File

@ -150,11 +150,11 @@ const handleFileChange = (event) => {
} }
.chip-status.status-parsed { .chip-status.status-parsed {
color: var(--green-600, #1a7f37); color: var(--color-success-600);
} }
.chip-status.status-failed { .chip-status.status-failed {
color: var(--red-600, #c62828); color: var(--color-error-600);
} }
.chip-remove { .chip-remove {

18
web/src/components/DebugComponent.vue
View File

@ -555,8 +555,8 @@ const printAgentConfig = async () => {
.log-container { .log-container {
height: calc(80vh - 200px); height: calc(80vh - 200px);
overflow-y: auto; overflow-y: auto;
background: #0C0C0C; background: var(--gray-900);
color: #D1D1D1; color: var(--gray-0);
border-radius: 5px; border-radius: 5px;
font-family: 'Consolas', 'Monaco', monospace; font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px; font-size: 13px;
@ -578,7 +578,7 @@ const printAgentConfig = async () => {
} }
.timestamp { .timestamp {
color: #6A9955; color: var(--color-success-500);
min-width: 80px; min-width: 80px;
} }
@ -588,7 +588,7 @@ const printAgentConfig = async () => {
} }
.module { .module {
color: #569CD6; color: var(--color-info-500);
min-width: 30px; min-width: 30px;
} }
@ -599,19 +599,19 @@ const printAgentConfig = async () => {
} }
.level-info { .level-info {
.level { color: #4EC9B0; } .level { color: var(--color-success-500); }
} }
.level-error { .level-error {
.level { color: #F14C4C; } .level { color: var(--color-error-500); }
} }
.level-debug { .level-debug {
.level { color: #9CDCFE; } .level { color: var(--color-info-500); }
} }
.level-warning { .level-warning {
.level { color: #DCD900; } .level { color: var(--color-warning-500); }
} }
.empty-logs { .empty-logs {
@ -622,7 +622,7 @@ const printAgentConfig = async () => {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.log-container { .log-container {
background: #1E1E1E; background: var(--gray-900);
} }
} }

16
web/src/components/FileUploadModal.vue
View File

@ -836,11 +836,11 @@ const chunkData = async () => {
} }
.ocr-warning { .ocr-warning {
color: #faad14; color: var(--color-warning-500);
} }
.ocr-healthy { .ocr-healthy {
color: #52c41a; color: var(--color-success-500);
} }
.upload-dragger { .upload-dragger {
@ -861,19 +861,19 @@ const chunkData = async () => {
.ocr-warning-alert { .ocr-warning-alert {
margin: 12px 0; margin: 12px 0;
padding: 8px 12px; padding: 8px 12px;
background: #fff7e6; background: var(--color-warning-50);
border: 1px solid #ffd666; border: 1px solid var(--color-warning-300);
border-radius: 4px; border-radius: 4px;
color: #d46b08; color: var(--color-warning-700);
font-size: 13px; font-size: 13px;
} }
.folder-upload-tip { .folder-upload-tip {
margin-top: 12px; margin-top: 12px;
padding: 12px; padding: 12px;
background: #f0f7ff; background: var(--color-info-50);
border-radius: 4px; border-radius: 4px;
color: var(--gray-500); color: var(--color-info-700);
font-size: 12px; font-size: 12px;
} }
@ -917,7 +917,7 @@ const chunkData = async () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 12px; padding: 8px 12px;
background: #fff; background: var(--gray-0);
border: 1px solid var(--gray-300); border: 1px solid var(--gray-300);
border-radius: 6px; border-radius: 6px;
} }

4
web/src/components/LoadingComponent.vue
View File

@ -45,7 +45,7 @@ const props = defineProps({
.loading-spinner { .loading-spinner {
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 5px solid #f3f3f3; border: 5px solid var(--gray-300);
border-top: 5px solid var(--main-color); border-top: 5px solid var(--main-color);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@ -61,4 +61,4 @@ const props = defineProps({
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
</style> </style>