feat: 优化 Knowledge 页面并添加样式文件
- 重构 Knowledge 页面代码 - 新增 knowledge.css 样式文件 - 添加知识库截图 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
504
web/src/views/knowledge/knowledge.css
Normal file
504
web/src/views/knowledge/knowledge.css
Normal file
@@ -0,0 +1,504 @@
|
||||
/* Knowledge 页面样式 */
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-primary {
|
||||
background-color: #f97316;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-input {
|
||||
background-color: #171922;
|
||||
border: 1px solid #374151;
|
||||
color: white;
|
||||
padding: 10px 12px 10px 36px;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.bg-dark-700 {
|
||||
background-color: #171922;
|
||||
}
|
||||
|
||||
.bg-dark-600 {
|
||||
background-color: #1a1c25;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-box {
|
||||
min-height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1f2937, #111827);
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-icon i {
|
||||
font-size: 40px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #d1d5db;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 基础弹窗样式 */
|
||||
.kb-dialog :deep(.el-dialog) {
|
||||
background-color: #1f2937;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #374151;
|
||||
}
|
||||
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 创建弹窗样式 */
|
||||
.kb-create-dialog :deep(.el-dialog) {
|
||||
background-color: #0f1419;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #1e2832;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #1e2832;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__title) {
|
||||
color: #e8eaed;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #5f6368;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__footer) {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid #1e2832;
|
||||
background-color: #0d1117;
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
|
||||
/* 创建内容布局 */
|
||||
.create-layout {
|
||||
display: flex;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
/* 左侧 sidebar */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
|
||||
border-right: 1px solid #1e2832;
|
||||
padding: 20px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: rgba(54, 191, 250, 0.06);
|
||||
border-color: rgba(54, 191, 250, 0.1);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: linear-gradient(135deg, rgba(54, 191, 250, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
|
||||
border-color: rgba(54, 191, 250, 0.25);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background-color: #1e2832;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #5f6368;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item.active .menu-icon {
|
||||
background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(54, 191, 250, 0.3);
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e8eaed;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.menu-item.active .menu-title {
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 12px;
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 12px;
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
/* 右侧内容区 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 36px 48px;
|
||||
background-color: #0f1419;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 区块标题 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #1e2832;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(54, 191, 250, 0.2) 0%, rgba(14, 165, 233, 0.12) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #36bffa;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.kb-form :deep(.el-form-item__label) {
|
||||
color: #9aa0a6;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__inner) {
|
||||
color: #e8eaed;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__inner::placeholder) {
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
color: #e8eaed;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner:focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper.is-focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
/* 提供商选项 */
|
||||
.provider-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.provider-option i {
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
/* 底部按钮区域 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-hint {
|
||||
font-size: 12px;
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid #2d3640;
|
||||
color: #9aa0a6;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
border-color: #5f6368;
|
||||
color: #e8eaed;
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
background-color: #1e2832;
|
||||
border: none;
|
||||
color: #9aa0a6;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prev-btn:hover {
|
||||
background-color: #2d3640;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(54, 191, 250, 0.25);
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background: linear-gradient(135deg, #4dc3ff 0%, #36bffa 100%);
|
||||
box-shadow: 0 6px 16px rgba(54, 191, 250, 0.35);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
|
||||
}
|
||||
Reference in New Issue
Block a user