first commit
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
/* 关于页 - 支持作者卡片 */
|
||||
|
||||
.about-donate-card {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.about-donate-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.about-donate-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.about-donate-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.about-donate-img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-donate-sub {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-donate-card {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.about-donate-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-donate-item {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.about-donate-img {
|
||||
max-width: 300px;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,241 @@
|
||||
/* ================================
|
||||
管理员功能样式 - 用户管理和数据管理
|
||||
================================ */
|
||||
|
||||
/* 用户管理样式 */
|
||||
.user-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.user-card .card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.user-card .badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* 数据管理样式 */
|
||||
.table-container {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--dark-color);
|
||||
color: white;
|
||||
z-index: 10;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(79, 70, 229, 0.05);
|
||||
}
|
||||
|
||||
/* 数据统计卡片 */
|
||||
.data-stats {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-stats .card-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* 表格状态样式 */
|
||||
#loadingTable,
|
||||
#noTableSelected,
|
||||
#noTableData {
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
#loadingTable .spinner-border {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-width: 0.3em;
|
||||
}
|
||||
|
||||
#noTableSelected i,
|
||||
#noTableData i {
|
||||
font-size: 4rem;
|
||||
color: var(--secondary-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 按钮组样式 */
|
||||
.btn-group .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group .btn:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-group .btn:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
/* 表格选择器样式 */
|
||||
#tableSelect {
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#tableSelect:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
|
||||
}
|
||||
|
||||
/* 记录计数样式 */
|
||||
#recordCount {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.user-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
border-radius: 6px !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.user-card,
|
||||
.table-container {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 表格滚动条样式 */
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 文本截断样式 */
|
||||
.text-truncate-custom {
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 状态徽章样式 */
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 工具提示样式增强 */
|
||||
[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* 空状态图标样式 */
|
||||
.empty-state-icon {
|
||||
font-size: 4rem;
|
||||
color: var(--secondary-color);
|
||||
opacity: 0.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.action-buttons .btn {
|
||||
margin: 0 0.125rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.action-buttons .btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* 统计卡片渐变背景 */
|
||||
.stats-card-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
}
|
||||
|
||||
.stats-card-info {
|
||||
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
|
||||
}
|
||||
|
||||
.stats-card-success {
|
||||
background: linear-gradient(135deg, var(--success-color) 0%, #0d9488 100%);
|
||||
}
|
||||
|
||||
.stats-card-warning {
|
||||
background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import url('variables.css');
|
||||
@import url('layout.css');
|
||||
@import url('dashboard.css');
|
||||
@import url('logs.css');
|
||||
@import url('keywords.css');
|
||||
@import url('accounts.css');
|
||||
@import url('items.css');
|
||||
@import url('notifications.css');
|
||||
@import url('components.css');
|
||||
@import url('about.css');
|
||||
@import url('admin.css');
|
||||
|
||||
|
||||
@@ -0,0 +1,848 @@
|
||||
/* ================================
|
||||
通用卡片样式 - 适用于所有菜单的卡片
|
||||
================================ */
|
||||
|
||||
/* 旋转动画 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, var(--success-color), #059669);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, var(--danger-color), #dc2626);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
border: 2px solid var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.btn-outline-success:hover {
|
||||
background: var(--success-color);
|
||||
border-color: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
border: 2px solid #0dcaf0;
|
||||
color: #0dcaf0;
|
||||
}
|
||||
|
||||
.btn-outline-info:hover {
|
||||
background: #0dcaf0;
|
||||
border-color: #0dcaf0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
border: 2px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.btn-outline-danger:hover {
|
||||
background: var(--danger-color);
|
||||
border-color: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
通用表格样式 - 适用于所有菜单的表格
|
||||
================================ */
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.table th {
|
||||
border-top: none;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
background: rgba(79, 70, 229, 0.05);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: rgba(79, 70, 229, 0.02);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-weight: 500;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.cookie-value {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
background: #f8fafc;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(248, 250, 252, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .loading {
|
||||
background-color: rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
|
||||
.keyword-editor {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.cookie-id {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
通用模态框样式 - 适用于所有菜单的模态框
|
||||
================================ */
|
||||
.modal-content {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-group .btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
AI回复配置 - 全量界面视觉增强
|
||||
================================ */
|
||||
#aiReplyConfigModal .modal-dialog {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-subtitle {
|
||||
font-size: 0.82rem;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-modal-intro {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(79, 70, 229, 0.16);
|
||||
background: linear-gradient(120deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-intro-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: rgba(79, 70, 229, 0.16);
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-intro-title {
|
||||
font-weight: 700;
|
||||
color: var(--dark-color);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-intro-text {
|
||||
font-size: 0.86rem;
|
||||
color: var(--secondary-color);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-section-card {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-section-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-section-desc {
|
||||
font-size: 0.76rem;
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-section-tag {
|
||||
font-size: 0.68rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-basic-card .card-body {
|
||||
background:
|
||||
radial-gradient(circle at right top, rgba(79, 70, 229, 0.09), transparent 45%),
|
||||
radial-gradient(circle at left bottom, rgba(6, 182, 212, 0.09), transparent 42%);
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-basic-overview {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-account-panel,
|
||||
#aiReplyConfigModal .ai-enable-panel,
|
||||
#aiReplyConfigModal .ai-config-block,
|
||||
#aiReplyConfigModal .ai-config-grid {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(79, 70, 229, 0.14);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-account-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-account-field i {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-account-field .form-control {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-enable-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-enable-switch {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-enable-switch .form-check-input {
|
||||
width: 2.7rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-config-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-preset-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-preset-controls .form-select {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-preset-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-config-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-config-item {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-config-item-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-endpoint-preview {
|
||||
margin-top: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed rgba(16, 185, 129, 0.45);
|
||||
background: rgba(16, 185, 129, 0.07);
|
||||
color: #047857;
|
||||
font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-bargain-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-metric-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(79, 70, 229, 0.14);
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-tip {
|
||||
border-radius: 12px;
|
||||
border: 1px dashed rgba(14, 165, 233, 0.42);
|
||||
background: rgba(14, 165, 233, 0.08);
|
||||
color: #0369a1;
|
||||
font-size: 0.86rem;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(79, 70, 229, 0.14);
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-card-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-dot-price {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-dot-tech {
|
||||
background: #06b6d4;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-dot-default {
|
||||
background: #6366f1;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-prompt-textarea {
|
||||
height: 132px;
|
||||
min-height: 132px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-test-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-test-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-test-btn {
|
||||
min-width: 124px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-test-result .alert {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.28);
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-footer-note {
|
||||
font-size: 0.82rem;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-footer-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aiReplyConfigModal .ai-reply-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-reply-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-modal-intro {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-bargain-grid,
|
||||
#aiReplyConfigModal .ai-prompt-grid,
|
||||
#aiReplyConfigModal .ai-test-grid,
|
||||
#aiReplyConfigModal .ai-basic-overview,
|
||||
#aiReplyConfigModal .ai-config-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-preset-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-preset-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-test-actions,
|
||||
#aiReplyConfigModal .ai-reply-footer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#aiReplyConfigModal .ai-footer-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin-top: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.cookie-value {
|
||||
font-size: 0.75rem;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* 移动端商品表格优化 */
|
||||
#itemsTableBody .btn-group {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#itemsTableBody .btn-group .btn {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================================
|
||||
API参数提示样式
|
||||
================================ */
|
||||
.param-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid #dee2e6;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.param-name:hover {
|
||||
background-color: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#postParamsHelp,
|
||||
#editPostParamsHelp {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#postParamsHelp .alert,
|
||||
#editPostParamsHelp .alert {
|
||||
margin-bottom: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 参数项点击效果 */
|
||||
.param-name:active {
|
||||
transform: translateY(0);
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
API参数提示样式
|
||||
================================ */
|
||||
.param-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid #dee2e6;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.param-name:hover {
|
||||
background-color: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#postParamsHelp,
|
||||
#editPostParamsHelp {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#postParamsHelp .alert,
|
||||
#editPostParamsHelp .alert {
|
||||
margin-bottom: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 参数项点击效果 */
|
||||
.param-name:active {
|
||||
transform: translateY(0);
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
菜单排序列表样式
|
||||
================================ */
|
||||
.menu-sort-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-sort-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-sort-item:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.menu-sort-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: #d1d5db;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.menu-sort-item.drag-over {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.menu-sort-item .drag-handle {
|
||||
cursor: grab;
|
||||
padding: 5px 10px 5px 0;
|
||||
color: #6b7280;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.menu-sort-item .drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.menu-sort-item .menu-icon {
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.menu-sort-item .menu-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-sort-item .menu-checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.menu-sort-item .badge {
|
||||
margin-left: 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,52 @@
|
||||
/* ================================
|
||||
【商品管理菜单】表格样式
|
||||
================================ */
|
||||
#itemsTableBody .btn-group {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#itemsTableBody .btn-group .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
#itemsTableBody .btn-group .btn:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#itemsTableBody .btn-group .btn:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
#itemsTableBody .btn-group .btn i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 表格操作列样式 */
|
||||
.table td:last-child {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
/* 表格文本截断优化 */
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table td[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* 商品表格特定优化 */
|
||||
#itemsTableBody td:nth-child(4),
|
||||
#itemsTableBody td:nth-child(5) {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,940 @@
|
||||
/* 关键词管理现代化样式 */
|
||||
.keyword-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.keyword-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-header h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyword-header .account-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.keyword-input-area {
|
||||
padding: 2rem;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.keyword-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.keyword-input-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.keyword-btn-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-field label {
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 0.75rem;
|
||||
background: #f8fafc;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-field input, .input-field select, .input-field textarea {
|
||||
width: 100%;
|
||||
padding: 1rem 0.75rem 0.75rem;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input-field input:focus, .input-field select:focus, .input-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.input-field textarea {
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 多选下拉框样式 */
|
||||
.input-field select[multiple] {
|
||||
min-height: 120px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.input-field select[multiple] option {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-field select[multiple] option:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.input-field select[multiple] option:checked {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.add-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
【自动回复菜单】相关样式
|
||||
================================ */
|
||||
.keywords-list {
|
||||
padding: 1.5rem 2rem 2rem;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.keyword-item {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.keyword-item:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.keyword-item-header {
|
||||
padding: 1rem 1.5rem;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-tag {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.keyword-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.edit-btn-disabled {
|
||||
background: #f9fafb !important;
|
||||
color: #9ca3af !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.edit-btn-disabled:hover {
|
||||
background: #f9fafb !important;
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.keyword-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0 0 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.quick-add-btn {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.quick-add-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 账号选择器现代化 */
|
||||
.account-selector {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.selector-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.selector-title {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selector-subtitle {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.account-select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account-select {
|
||||
width: 100%;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.account-select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
【自动回复菜单】图片关键词样式
|
||||
================================ */
|
||||
.btn-image {
|
||||
background: linear-gradient(135deg, #28a745, #20c997) !important;
|
||||
border: none !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-image:hover {
|
||||
background: linear-gradient(135deg, #218838, #1ea085) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.keyword-input-group .add-btn {
|
||||
white-space: nowrap;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
padding: 10px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.keyword-type-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.keyword-type-text {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.keyword-type-image {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
/* 关键词列表中的图片预览 */
|
||||
.keyword-image-preview {
|
||||
max-width: 60px;
|
||||
max-height: 60px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.keyword-image-preview:hover {
|
||||
border-color: #007bff;
|
||||
transform: scale(1.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
【关键词分组显示】新样式
|
||||
================================ */
|
||||
.keyword-group-item {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.keyword-group-item:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.keyword-group-header {
|
||||
padding: 1rem 1.5rem;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.keyword-count-badge {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.keyword-group-reply {
|
||||
padding: 1rem 1.5rem;
|
||||
background: #fefce8;
|
||||
border-bottom: 1px solid #fef08a;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.keyword-group-reply strong {
|
||||
color: #854d0e;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.reply-text-content {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.keyword-group-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.keyword-section, .item-section {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.keyword-section:last-child, .item-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chips-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.keyword-chip, .item-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
|
||||
color: #5b21b6;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.keyword-chip:hover, .item-chip:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(91, 33, 182, 0.2);
|
||||
}
|
||||
|
||||
.item-chip {
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||||
color: #1e40af;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.item-chip:hover {
|
||||
box-shadow: 0 4px 8px rgba(30, 64, 175, 0.2);
|
||||
}
|
||||
|
||||
.chip-remove-btn {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.chip-remove-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.chip-remove-btn i {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 回复内容编辑按钮 */
|
||||
.reply-edit-btn {
|
||||
background: none;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reply-edit-btn:hover {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.reply-edit-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.reply-edit-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #667eea;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
background: white;
|
||||
color: #374151;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.reply-edit-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.reply-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.reply-save-btn, .reply-cancel-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.reply-save-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reply-save-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.reply-cancel-btn {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.reply-cancel-btn:hover {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
暗色模式适配 - 关键词管理
|
||||
================================ */
|
||||
[data-theme="dark"] .keyword-container {
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-input-area {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field label {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field input,
|
||||
[data-theme="dark"] .input-field select,
|
||||
[data-theme="dark"] .input-field textarea {
|
||||
background: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field input:focus,
|
||||
[data-theme="dark"] .input-field select:focus,
|
||||
[data-theme="dark"] .input-field textarea:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field input::placeholder,
|
||||
[data-theme="dark"] .input-field textarea::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field select[multiple] option {
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field select[multiple] option:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field select[multiple] option:checked {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 暗色 - 关键词列表 */
|
||||
[data-theme="dark"] .keyword-item {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-item-header {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-content {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-text {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色 - 关键词分组 */
|
||||
[data-theme="dark"] .keyword-group-item {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-header {
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--input-bg) 100%);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-reply {
|
||||
background: rgba(133, 77, 14, 0.15);
|
||||
border-bottom-color: rgba(254, 240, 138, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-reply strong {
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-text-content {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-content {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .section-title {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 暗色 - Chips */
|
||||
[data-theme="dark"] .keyword-chip {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(124, 58, 237, 0.25) 100%);
|
||||
color: #c4b5fd;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-chip:hover {
|
||||
box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .item-chip {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .item-chip:hover {
|
||||
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .chip-remove-btn {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .chip-remove-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 暗色 - 操作按钮 */
|
||||
[data-theme="dark"] .edit-btn {
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .edit-btn:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .delete-btn {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .delete-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 暗色 - 空状态 */
|
||||
[data-theme="dark"] .empty-state {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .empty-state h3 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色 - 账号选择器 */
|
||||
[data-theme="dark"] .account-selector {
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .selector-title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .selector-subtitle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .account-select {
|
||||
background: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .account-select:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
/* 暗色 - 图片预览 */
|
||||
[data-theme="dark"] .preview-container {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-image-preview {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-image-preview:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
/* 暗色 - 类型徽章 */
|
||||
[data-theme="dark"] .keyword-type-text {
|
||||
background-color: rgba(25, 118, 210, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-type-image {
|
||||
background-color: rgba(123, 31, 162, 0.2);
|
||||
color: #d8b4fe;
|
||||
}
|
||||
|
||||
/* 暗色 - 回复编辑 */
|
||||
[data-theme="dark"] .reply-edit-btn {
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-edit-btn:hover {
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-edit-textarea {
|
||||
background: var(--input-bg);
|
||||
border-color: #667eea;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-edit-textarea:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-cancel-btn {
|
||||
background: var(--input-bg);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .reply-cancel-btn:hover {
|
||||
background: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色 - Modal 内关键词样式 */
|
||||
[data-theme="dark"] .modal .input-field input,
|
||||
[data-theme="dark"] .modal .input-field textarea {
|
||||
background: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.keyword-input-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.keyword-btn-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.keyword-item-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.keyword-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.keyword-input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.keyword-input-group .add-btn {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.keyword-group-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chips-container {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.keyword-chip, .item-chip {
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
}
|
||||
|
||||
.item-chip {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
/* ================================
|
||||
通用布局 - 侧边栏和导航
|
||||
================================ */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1.5rem 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 暗色模式切换按钮 */
|
||||
.dark-mode-toggle {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dark-mode-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.dark-mode-toggle i {
|
||||
font-size: 1rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dark-mode-toggle:hover i {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 1rem 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 侧边栏滚动条样式 */
|
||||
.sidebar-nav::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Firefox滚动条样式 */
|
||||
.sidebar-nav {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: white;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-left-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: white;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
margin-right: 0.75rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-divider {
|
||||
padding: 0.5rem 1rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-divider small {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-color);
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
background: white;
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.content-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1001;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 侧边栏折叠样式 */
|
||||
.sidebar.collapsed {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-brand span,
|
||||
.sidebar.collapsed .nav-link span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-brand {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-brand img {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-link {
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-link i {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-divider {
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-divider small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-collapse-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-collapse-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-collapse-btn i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 折叠状态下的主内容区域 */
|
||||
body.sidebar-collapsed .main-content {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
/* 侧边栏底部折叠按钮 */
|
||||
.sidebar-footer {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: rgba(255,255,255,0.8);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn i {
|
||||
margin-right: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 内容区域样式 */
|
||||
.content-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 在线客服页面特殊样式 - 使用flex布局填满高度 */
|
||||
#online-im-section.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
#online-im-section .content-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#online-im-section .content-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,875 @@
|
||||
/* ================================
|
||||
【日志管理菜单】相关样式
|
||||
================================ */
|
||||
.log-container {
|
||||
height: 70vh;
|
||||
overflow-y: auto;
|
||||
background-color: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
margin-bottom: 0px;
|
||||
padding: 1px 0;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.log-entry.DEBUG {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.log-entry.INFO {
|
||||
color: #4ec9b0;
|
||||
}
|
||||
|
||||
.log-entry.WARNING {
|
||||
color: #dcdcaa;
|
||||
}
|
||||
|
||||
.log-entry.ERROR {
|
||||
color: #f48771;
|
||||
}
|
||||
|
||||
.log-entry.CRITICAL {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.log-source {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-track {
|
||||
background: #2d2d30;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-thumb {
|
||||
background: #464647;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #5a5a5c;
|
||||
}
|
||||
|
||||
/* 日志过滤标签样式 */
|
||||
.filter-badge {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 32px;
|
||||
padding: 0.45rem 0.8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.filter-badge:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.filter-badge.active {
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.toolbar-count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 32px;
|
||||
padding: 0.5rem 0.875rem;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.risk-event-category-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 28px;
|
||||
padding: 0.38rem 0.68rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.risk-event-category-trigger {
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
color: var(--primary-color);
|
||||
border-color: rgba(79, 70, 229, 0.14);
|
||||
}
|
||||
|
||||
.risk-event-category-refresh {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success-color);
|
||||
border-color: rgba(16, 185, 129, 0.14);
|
||||
}
|
||||
|
||||
.risk-event-category-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger-color);
|
||||
border-color: rgba(239, 68, 68, 0.14);
|
||||
}
|
||||
|
||||
.risk-event-category-neutral {
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
color: #475569;
|
||||
border-color: rgba(100, 116, 139, 0.14);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-event-category-trigger {
|
||||
background: rgba(99, 102, 241, 0.22);
|
||||
color: #c7d2fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-event-category-refresh {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-event-category-error {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-event-category-neutral {
|
||||
background: rgba(100, 116, 139, 0.22);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.risk-log-toolbar-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.risk-tool-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 252, 0.96));
|
||||
box-shadow: 0 14px 30px -28px rgba(15, 23, 42, 0.25);
|
||||
padding: 0.82rem 0.9rem;
|
||||
}
|
||||
|
||||
.risk-tool-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.risk-slider-stats-panel,
|
||||
.risk-log-filter-panel {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.risk-tool-card-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.risk-tool-card-meta {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.risk-tool-card-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
|
||||
}
|
||||
|
||||
.risk-tool-card-icon.primary,
|
||||
.risk-tool-card-icon.warning {
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.risk-tool-card-kicker {
|
||||
font-size: 0.64rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
.risk-tool-card h6 {
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.risk-tool-card p {
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.risk-tool-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.38rem 0.72rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: rgba(79, 70, 229, 0.05);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.risk-slider-range-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.18rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(79, 70, 229, 0.04);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.risk-slider-range-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 29px;
|
||||
padding: 0.3rem 0.62rem;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.risk-slider-range-btn:hover {
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.risk-slider-range-btn.is-active {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.18);
|
||||
}
|
||||
|
||||
.risk-slider-hero {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.72rem;
|
||||
margin-bottom: 0.62rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.risk-slider-rate-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
.risk-slider-rate {
|
||||
font-size: clamp(1.72rem, 2.7vw, 2.15rem);
|
||||
line-height: 0.95;
|
||||
font-weight: 800;
|
||||
color: var(--primary-hover);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.risk-slider-total {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0.38rem 0.68rem;
|
||||
border-radius: 12px;
|
||||
background: rgba(79, 70, 229, 0.05);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.risk-slider-stats-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.risk-slider-stat-chip {
|
||||
border-radius: 12px;
|
||||
min-height: 72px;
|
||||
padding: 0.72rem 0.78rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.55rem;
|
||||
background: rgba(248, 250, 252, 0.95);
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.risk-slider-stat-chip span {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.risk-slider-stat-chip strong {
|
||||
font-size: 1.18rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.risk-slider-stat-chip.success strong {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.risk-slider-stat-chip.danger strong {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.risk-slider-stats-foot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.6rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.risk-slider-foot-item {
|
||||
padding-top: 0.42rem;
|
||||
border-top: 1px dashed rgba(148, 163, 184, 0.34);
|
||||
}
|
||||
|
||||
.risk-slider-foot-item span {
|
||||
display: block;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.risk-slider-foot-item strong {
|
||||
font-size: 0.84rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.risk-filter-panel-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.72rem;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 0.58rem;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.risk-filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
|
||||
grid-template-areas:
|
||||
"account account"
|
||||
"limit event";
|
||||
gap: 0.72rem 0.62rem;
|
||||
align-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.risk-filter-field,
|
||||
.risk-filter-action {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.risk-filter-field-account {
|
||||
grid-area: account;
|
||||
}
|
||||
|
||||
.risk-filter-field-limit {
|
||||
grid-area: limit;
|
||||
}
|
||||
|
||||
.risk-filter-field-event {
|
||||
grid-area: event;
|
||||
}
|
||||
|
||||
.risk-log-filter-panel .form-label {
|
||||
font-size: 0.64rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.risk-filter-field .form-select,
|
||||
.risk-filter-field .form-control {
|
||||
min-height: 38px;
|
||||
padding-top: 0.42rem;
|
||||
padding-bottom: 0.42rem;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.risk-filter-action {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.risk-filter-action > div {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.risk-filter-refresh-btn {
|
||||
min-height: 38px;
|
||||
width: auto;
|
||||
min-width: 136px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.risk-filter-status-bar {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
padding-top: 0.42rem;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.risk-filter-status-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges {
|
||||
gap: 0.45rem !important;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.risk-filter-status-refresh {
|
||||
min-width: 118px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
min-height: 30px;
|
||||
padding: 0.36rem 0.68rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge.active {
|
||||
box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.55);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-neutral {
|
||||
background: rgba(100, 116, 139, 0.08);
|
||||
color: #475569;
|
||||
border-color: rgba(100, 116, 139, 0.12);
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-neutral.active {
|
||||
background: #64748b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-processing {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
color: #b45309;
|
||||
border-color: rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-processing.active {
|
||||
background: #f59e0b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-success {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
color: #0f9b76;
|
||||
border-color: rgba(16, 185, 129, 0.12);
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-success.active {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-danger {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #dc2626;
|
||||
border-color: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.risk-log-filter-badges .filter-badge-danger.active {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.risk-log-table-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.risk-log-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.risk-log-table th,
|
||||
.risk-log-table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.risk-log-table td {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.risk-log-col-time {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.risk-log-col-account {
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.risk-log-col-category {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.risk-log-col-scene {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.risk-log-col-status {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.risk-log-col-summary {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
.risk-log-col-outcome {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
.risk-log-col-duration {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.risk-log-col-session {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.risk-log-col-action {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.risk-log-summary-cell,
|
||||
.risk-log-outcome-cell {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.risk-log-summary-cell {
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.risk-log-cell-summary,
|
||||
.risk-log-cell-outcome {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.risk-log-cell-session {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 1.35;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.risk-log-outcome-cell details {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.risk-log-outcome-cell pre {
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-tool-card {
|
||||
border-color: rgba(148, 163, 184, 0.12);
|
||||
background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92));
|
||||
box-shadow: 0 18px 34px -30px rgba(2, 6, 23, 0.92);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-tool-card-icon.primary,
|
||||
[data-theme="dark"] .risk-tool-card-icon.warning {
|
||||
background: rgba(99, 102, 241, 0.22);
|
||||
color: #c7d2fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-tool-chip {
|
||||
background: rgba(99, 102, 241, 0.16);
|
||||
border-color: rgba(148, 163, 184, 0.14);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-range-group {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-range-btn {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-range-btn:hover {
|
||||
background: rgba(129, 140, 248, 0.14);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-range-btn.is-active {
|
||||
background: rgba(129, 140, 248, 0.92);
|
||||
color: #0f172a;
|
||||
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.26);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-rate {
|
||||
color: #c7d2fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-total {
|
||||
background: rgba(99, 102, 241, 0.14);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-stat-chip {
|
||||
background: rgba(15, 23, 42, 0.68);
|
||||
border-color: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-slider-foot-item,
|
||||
[data-theme="dark"] .risk-filter-status-bar {
|
||||
border-top-color: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-filter-field .form-select {
|
||||
background: rgba(15, 23, 42, 0.68);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-log-filter-badges .filter-badge-neutral {
|
||||
background: rgba(100, 116, 139, 0.22);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-log-filter-badges .filter-badge-processing {
|
||||
background: rgba(245, 158, 11, 0.22);
|
||||
color: #fde68a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-log-filter-badges .filter-badge-success {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .risk-log-filter-badges .filter-badge-danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.risk-log-table {
|
||||
min-width: 1080px;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.risk-tool-card-header,
|
||||
.risk-slider-hero {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.risk-filter-status-controls {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.risk-filter-panel-body {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.risk-filter-grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(100px, 0.78fr);
|
||||
grid-template-areas:
|
||||
"account account"
|
||||
"limit event";
|
||||
align-content: start;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.risk-filter-action {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.risk-filter-status-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.risk-filter-status-refresh {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.risk-tool-card {
|
||||
padding: 0.78rem;
|
||||
}
|
||||
|
||||
.risk-filter-grid,
|
||||
.risk-slider-stats-grid,
|
||||
.risk-slider-stats-foot {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.risk-filter-panel-body {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.risk-filter-grid {
|
||||
grid-template-areas:
|
||||
"account"
|
||||
"limit"
|
||||
"event";
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.risk-filter-action {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自动刷新指示器 */
|
||||
.auto-refresh-indicator {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 日志行悬停效果 */
|
||||
.log-entry:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* 商品搜索相关样式 */
|
||||
.item-card {
|
||||
transition: transform 0.2s;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.seller-name {
|
||||
color: #6c757d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.want-count {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.want-count .badge {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/* ================================
|
||||
【通知渠道菜单】卡片样式
|
||||
================================ */
|
||||
.channel-type-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
min-height: 180px; /* 设置最小高度，让卡片更紧凑 */
|
||||
}
|
||||
|
||||
.channel-type-card .card-body {
|
||||
padding: 1rem; /* 减少内边距 */
|
||||
}
|
||||
|
||||
.channel-type-card .channel-icon {
|
||||
transition: transform 0.3s ease;
|
||||
margin-bottom: 0.75rem !important; /* 减少图标下方间距 */
|
||||
}
|
||||
|
||||
.channel-type-card .channel-icon i {
|
||||
font-size: 2.2rem !important; /* 减小图标大小 */
|
||||
}
|
||||
|
||||
.channel-type-card .card-title {
|
||||
font-size: 1.1rem; /* 减小标题字体 */
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.channel-type-card .card-text {
|
||||
font-size: 0.85rem; /* 减小描述文字 */
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.channel-type-card .btn {
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.85rem; /* 减小按钮文字 */
|
||||
padding: 0.375rem 0.75rem; /* 减小按钮内边距 */
|
||||
}
|
||||
|
||||
.channel-type-card:hover {
|
||||
transform: translateY(-3px); /* 减少悬停位移 */
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.channel-type-card:hover .channel-icon {
|
||||
transform: scale(1.05); /* 减少悬停缩放 */
|
||||
}
|
||||
|
||||
.channel-type-card:hover .btn {
|
||||
transform: scale(1.02); /* 减少按钮悬停缩放 */
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.channel-type-card {
|
||||
margin-bottom: 10px;
|
||||
min-height: 160px; /* 移动端稍微减小高度 */
|
||||
}
|
||||
|
||||
.channel-type-card .card-body {
|
||||
padding: 0.75rem; /* 移动端减少内边距 */
|
||||
}
|
||||
|
||||
.channel-type-card .channel-icon i {
|
||||
font-size: 2rem !important; /* 移动端图标更小 */
|
||||
}
|
||||
|
||||
.channel-type-card .card-title {
|
||||
font-size: 1rem; /* 移动端标题更小 */
|
||||
}
|
||||
|
||||
.channel-type-card .card-text {
|
||||
font-size: 0.8rem; /* 移动端描述文字更小 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1400px) {
|
||||
.channel-type-card {
|
||||
min-height: 200px; /* 大屏幕稍微增加高度 */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,550 @@
|
||||
/* ================================
|
||||
全局变量和基础样式
|
||||
================================ */
|
||||
:root {
|
||||
--primary-color: #4f46e5;
|
||||
--primary-hover: #4338ca;
|
||||
--primary-light: #6366f1;
|
||||
--secondary-color: #6b7280;
|
||||
--success-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
--light-color: #f9fafb;
|
||||
--dark-color: #1f2937;
|
||||
--border-color: #e5e7eb;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 暗色模式变量 */
|
||||
--bg-color: #f8fafc;
|
||||
--bg-secondary: #ffffff;
|
||||
--text-color: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--card-bg: #ffffff;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db;
|
||||
--table-stripe: rgba(0, 0, 0, 0.02);
|
||||
--modal-bg: #ffffff;
|
||||
}
|
||||
|
||||
/* 暗色模式 */
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--text-color: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--card-bg: #1e293b;
|
||||
--input-bg: #334155;
|
||||
--input-border: #475569;
|
||||
--border-color: #334155;
|
||||
--light-color: #1e293b;
|
||||
--dark-color: #f1f5f9;
|
||||
--table-stripe: rgba(255, 255, 255, 0.02);
|
||||
--modal-bg: #1e293b;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式下的通用样式覆盖 */
|
||||
[data-theme="dark"] .card {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control,
|
||||
[data-theme="dark"] .form-select {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus,
|
||||
[data-theme="dark"] .form-select:focus {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table > :not(caption) > * > * {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
background-color: var(--table-stripe);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-content {
|
||||
background-color: var(--modal-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-header {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-account-panel,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-enable-panel,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-config-block,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-config-grid,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-metric-card,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-prompt-card {
|
||||
background: rgba(30, 41, 59, 0.78);
|
||||
border-color: rgba(99, 102, 241, 0.32);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-modal-intro {
|
||||
background: linear-gradient(120deg, rgba(99, 102, 241, 0.22), rgba(6, 182, 212, 0.22));
|
||||
border-color: rgba(99, 102, 241, 0.38);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-intro-icon {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
color: #c7d2fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-intro-title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-intro-text,
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-footer-note {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-section-tag {
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-basic-card .card-body {
|
||||
background:
|
||||
radial-gradient(circle at right top, rgba(99, 102, 241, 0.2), transparent 45%),
|
||||
radial-gradient(circle at left bottom, rgba(6, 182, 212, 0.2), transparent 42%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-account-field i {
|
||||
box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-endpoint-preview {
|
||||
border-color: rgba(16, 185, 129, 0.42);
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-prompt-tip {
|
||||
border-color: rgba(14, 165, 233, 0.4);
|
||||
background: rgba(14, 165, 233, 0.14);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #aiReplyConfigModal .ai-test-result .alert {
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
background-color: rgba(30, 58, 138, 0.25);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-footer {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-close {
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-menu {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-item {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-item:hover {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .list-group-item {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge.bg-light {
|
||||
background-color: var(--input-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-muted {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .border {
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] hr {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-white {
|
||||
background-color: var(--card-bg) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-light {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
}
|
||||
|
||||
/* 暗色模式下的主内容区域 */
|
||||
[data-theme="dark"] .main-content {
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .content-header {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的统计卡片 */
|
||||
[data-theme="dark"] .stat-card {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
/* 暗色模式下的输入框组 */
|
||||
[data-theme="dark"] .input-group-text {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的表单标签 */
|
||||
[data-theme="dark"] .form-label,
|
||||
[data-theme="dark"] .form-check-label,
|
||||
[data-theme="dark"] .col-form-label {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的卡片标题和文字 */
|
||||
[data-theme="dark"] .card-title,
|
||||
[data-theme="dark"] .card-text,
|
||||
[data-theme="dark"] .card-header,
|
||||
[data-theme="dark"] .card-body {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的纯文本表单控件 */
|
||||
[data-theme="dark"] .form-control-plaintext {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的表格表头 */
|
||||
[data-theme="dark"] .table th {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的 Bootstrap 文字颜色类 */
|
||||
[data-theme="dark"] .text-dark {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-body {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
/* 暗色模式下的 alert 组件 */
|
||||
[data-theme="dark"] .alert {
|
||||
color: var(--text-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-info {
|
||||
background-color: rgba(59, 130, 246, 0.2);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-warning {
|
||||
background-color: rgba(245, 158, 11, 0.2);
|
||||
border-color: rgba(245, 158, 11, 0.3);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-success {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
/* 暗色模式下的状态徽章 */
|
||||
[data-theme="dark"] .status-badge.enabled {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .status-badge.disabled {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* 暗色模式下的空状态图标 */
|
||||
[data-theme="dark"] .empty-state i,
|
||||
[data-theme="dark"] .text-center i[style*="color: #ccc"] {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* 暗色模式下的标题和段落 */
|
||||
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
|
||||
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的小字和次要文字 */
|
||||
[data-theme="dark"] small,
|
||||
[data-theme="dark"] .small,
|
||||
[data-theme="dark"] .text-secondary {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* 暗色模式下的账号禁用状态 */
|
||||
[data-theme="dark"] .account-row.disabled {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 暗色模式下的 Cookie 值显示 */
|
||||
[data-theme="dark"] .cookie-value {
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的选择器标题 */
|
||||
[data-theme="dark"] .selector-title,
|
||||
[data-theme="dark"] .selector-subtitle {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的关键词管理 */
|
||||
[data-theme="dark"] .keyword-container,
|
||||
[data-theme="dark"] .keyword-input-area {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .keyword-group-title,
|
||||
[data-theme="dark"] .section-title,
|
||||
[data-theme="dark"] .reply-text,
|
||||
[data-theme="dark"] .reply-text-content {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .empty-state,
|
||||
[data-theme="dark"] .empty-state h3 {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .edit-btn {
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-field label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 内容区域的 nav-tabs 样式修复（覆盖侧边栏样式） */
|
||||
.content-body .nav-tabs .nav-link {
|
||||
color: #495057;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.content-body .nav-tabs .nav-link:hover {
|
||||
color: #0d6efd;
|
||||
border-color: #e9ecef #e9ecef #dee2e6;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.content-body .nav-tabs .nav-link.active {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #dee2e6 #dee2e6 #fff;
|
||||
}
|
||||
|
||||
/* 暗色模式下的 nav-tabs */
|
||||
[data-theme="dark"] .nav-tabs {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link,
|
||||
[data-theme="dark"] .content-body .nav-tabs .nav-link {
|
||||
color: var(--text-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link.active,
|
||||
[data-theme="dark"] .content-body .nav-tabs .nav-link.active {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link:hover,
|
||||
[data-theme="dark"] .content-body .nav-tabs .nav-link:hover {
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的 tab-content */
|
||||
[data-theme="dark"] .tab-content {
|
||||
border-color: var(--border-color) !important;
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
/* 暗色模式下的模板预览区域 */
|
||||
[data-theme="dark"] .bg-light {
|
||||
background-color: var(--bg-color) !important;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的 accordion */
|
||||
[data-theme="dark"] .accordion-item {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .accordion-button {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .accordion-button:not(.collapsed) {
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .accordion-body {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的账号选择器 */
|
||||
[data-theme="dark"] .account-selector {
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .account-select {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .account-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .selector-title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .selector-subtitle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .account-select-wrapper select option {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的表单帮助文字 */
|
||||
[data-theme="dark"] .form-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 暗色模式下的菜单管理列表 */
|
||||
[data-theme="dark"] .menu-sort-item {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu-sort-item:hover {
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu-sort-item.dragging {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu-sort-item .drag-handle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu-sort-item .menu-name {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 暗色模式下的全局滚动条 */
|
||||
[data-theme="dark"] {
|
||||
scrollbar-color: #475569 #1e293b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-track {
|
||||
background: #1e293b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-corner {
|
||||
background: #1e293b;
|
||||
}
|
||||
Reference in New Issue
Block a user