caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化暗色主题样式，将原生select替换为el-select

Browse Source 
- 优化el-select组件的暗色主题样式，包括输入框、下拉菜单、选中状态等
- 在Agents、MCP、ModelAPIs页面中将原生select替换为Element Plus el-select组件
- 提升UI一致性和用户体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-05 11:31:36 +08:00
parent 2154db01cf
commit 3c33f15f82
4 changed files with 134 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/style.css
View File

@@ -31,13 +31,16 @@ html.dark {
--el-color-primary: #ff9500;
}
/* el-select 统一样式 */
html.dark .el-select {
--el-select-input-focus-border-color: #ff9500;
}
html.dark .el-select .el-input__wrapper {
background-color: #171922;
background-color: #1a1c25;
box-shadow: 0 0 0 1px #2a2c36 inset;
border-radius: 8px;
transition: all 0.2s ease;
}
html.dark .el-select .el-input__wrapper:hover {
@@ -52,13 +55,40 @@ html.dark .el-select .el-input__inner {
color: #ffffff;
}
html.dark .el-select .el-input__inner::placeholder {
color: #71717a;
}
/* 下拉箭头 */
html.dark .el-select .el-input__suffix .el-select__caret {
color: #71717a;
transition: transform 0.3s;
}
html.dark .el-select .el-input__suffix .el-select__caret.is-reverse {
transform: rotate(180deg);
}
html.dark .el-select .el-input__suffix .el-select__caret.is-show-close {
color: #71717a;
}
html.dark .el-select .el-input__suffix .el-select__caret:hover {
color: #ff9500;
}
/* 下拉菜单 */
html.dark .el-select-dropdown {
background-color: #171922;
border: 1px solid #2a2c36;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html.dark .el-select-dropdown__item {
color: #ffffff;
padding: 8px 12px;
transition: all 0.2s;
}
html.dark .el-select-dropdown__item:hover {
@@ -71,6 +101,23 @@ html.dark .el-select-dropdown__item.is-selected {
background-color: transparent;
}
html.dark .el-select-dropdown__item.is-selected::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background-color: #ff9500;
border-radius: 50%;
margin-right: 8px;
}
/* 空状态 */
html.dark .el-select-dropdown__empty {
color: #71717a;
padding: 20px 0;
}
/* popper 箭头 */
html.dark .el-popper.is-light {
background: #171922;
border: 1px solid #2a2c36;
@@ -81,6 +128,32 @@ html.dark .el-popper.is-light .el-popper__arrow::before {
border-color: #2a2c36;
}
/* 输入框尺寸 */
html.dark .el-select.el-select--large .el-input__wrapper {
padding: 4px 11px;
}
html.dark .el-select.el-select--default .el-input__wrapper {
padding: 3px 10px;
}
/* 多选标签 */
html.dark .el-select .el-tag {
background-color: #2a2c36;
border-color: transparent;
color: #ffffff;
border-radius: 4px;
}
html.dark .el-select .el-tag .el-tag__close {
color: #71717a;
}
html.dark .el-select .el-tag .el-tag__close:hover {
background-color: #ff9500;
color: #ffffff;
}
/* 柱状图增长动画 */
@keyframes bar-grow {
from {