feat: 重构 Settings 页面样式
- 拆分 Settings 页面样式到独立 CSS 文件 - 新增 modelSettings、settings-parsing、settings 等样式文件 - 添加 TypeScript 类型定义 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
296
web/src/views/settings/modelSettings.css
Normal file
296
web/src/views/settings/modelSettings.css
Normal file
@@ -0,0 +1,296 @@
|
||||
/* Model Settings 页面样式 */
|
||||
|
||||
/* 表格样式 */
|
||||
.model-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.model-table th {
|
||||
text-align: left;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
background-color: #1a1a24;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.model-table th.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model-table td {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #252530;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.model-table td.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model-table td.text-sm {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-table .font-medium {
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.model-table .table-row:hover {
|
||||
background-color: #1a1a24;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-active {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: rgba(107, 114, 128, 0.2);
|
||||
color: #9ca3af;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* Model Type 标签 */
|
||||
.model-type-tag {
|
||||
background-color: rgba(249, 115, 22, 0.2);
|
||||
color: #f97316;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.btn-icon {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.25s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background-color: #1e1e28;
|
||||
}
|
||||
|
||||
.btn-icon i {
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-icon:hover i {
|
||||
color: #f97316 !important;
|
||||
}
|
||||
|
||||
/* 添加模型按钮 */
|
||||
.add-model-btn {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-model-btn:hover {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.add-model-dialog :deep(.el-dialog) {
|
||||
background-color: #16161e;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #252530;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
animation: dialogFadeIn 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #252530;
|
||||
}
|
||||
|
||||
/* 弹窗描述 */
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 弹窗底部按钮 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
background-color: #1e1e28;
|
||||
border: 1px solid #3a3a4a;
|
||||
color: #d1d5db;
|
||||
transition: all 0.25s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background-color: #2a2a3a;
|
||||
border-color: #4a4a5a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 连接状态 */
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.connection-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.add-model-dialog :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown) {
|
||||
background-color: #1a1a24;
|
||||
border: 1px solid #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item) {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.hover),
|
||||
.add-model-dialog :deep(.el-select-dropdown__item:hover) {
|
||||
background-color: #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.selected) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.loading-spinner i {
|
||||
font-size: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user