3782 lines
77 KiB
CSS
3782 lines
77 KiB
CSS
/* ccSparkle Agent · 中台 — Web UI 样式 */
|
|
|
|
/* ============================================================
|
|
字体
|
|
============================================================ */
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('assets/fonts/Orbitron-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url('assets/fonts/Orbitron-SemiBold.ttf') format('truetype');
|
|
}
|
|
|
|
/* ============================================================
|
|
CSS 变量(金属蓝黑配色,与 management-site 一致)
|
|
============================================================ */
|
|
:root {
|
|
--font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
--font-mono: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
--primary-color: #4A7BB9;
|
|
--primary-light: #5A8BCF;
|
|
--primary-dark: #3A6BA9;
|
|
--accent-color: #6B8CBF;
|
|
--metal-shine: #9BB3CF;
|
|
|
|
--success-color: #4A9F6A;
|
|
--warning-color: #9F8A4A;
|
|
--danger-color: #9F4A5A;
|
|
|
|
--background-dark: #0F1828;
|
|
--background-card: #151F2E;
|
|
--surface-color: #1B2838;
|
|
--surface-hover: #223142;
|
|
--surface-light: #293948;
|
|
|
|
/* 聊天区稍亮,便于阅读 */
|
|
--chat-bg: #1A2438;
|
|
--chat-card: #223047;
|
|
|
|
--text-primary: #F0F4F8;
|
|
--text-secondary: #B8C5D7;
|
|
--text-tertiary: #7B8A9F;
|
|
|
|
--border-color: #3A4555;
|
|
--border-light: #4A5565;
|
|
|
|
--navbar-height: 64px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
|
|
--user-bubble: linear-gradient(135deg, #4A7BB9 0%, #3A6BA9 100%);
|
|
--assistant-bubble: #1F2A40;
|
|
}
|
|
|
|
/* ============================================================
|
|
基础重置
|
|
============================================================ */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-primary);
|
|
background: var(--background-dark);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(74, 123, 185, 0.08) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom right, rgba(155, 179, 207, 0.05) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
#app {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ============================================================
|
|
导航栏
|
|
============================================================ */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--navbar-height);
|
|
background: var(--surface-color);
|
|
border-bottom: 2px solid var(--border-light);
|
|
box-shadow: var(--shadow-lg), inset 0 -1px 0 rgba(139, 163, 191, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.navbar-logo {
|
|
width: 38px;
|
|
height: 38px;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.navbar-title {
|
|
font-family: 'Orbitron', monospace, var(--font-primary);
|
|
font-size: 19px;
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
letter-spacing: 0.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-subtitle {
|
|
font-family: var(--font-primary);
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
padding-left: 10px;
|
|
border-left: 2px solid var(--border-color);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.navbar-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* ============================================================
|
|
协议 toggle
|
|
============================================================ */
|
|
.mode-toggle {
|
|
display: inline-flex;
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.mode-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
padding: 5px 14px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.mode-btn.active {
|
|
background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
|
|
color: white;
|
|
box-shadow: 0 1px 3px rgba(74, 123, 185, 0.4), inset 0 1px 0 rgba(155, 179, 207, 0.2);
|
|
}
|
|
|
|
/* ============================================================
|
|
监控指标徽章
|
|
============================================================ */
|
|
.metrics-badges {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
padding: 5px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.badge.active {
|
|
border-color: var(--success-color);
|
|
color: var(--success-color);
|
|
box-shadow: 0 0 8px rgba(74, 159, 106, 0.2);
|
|
}
|
|
|
|
.badge.warn {
|
|
border-color: var(--warning-color);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.badge.danger {
|
|
border-color: var(--danger-color);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.btn-clear {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
padding: 5px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn-clear:hover {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
border-color: var(--danger-color);
|
|
}
|
|
|
|
/* ============================================================
|
|
主体布局(sidebar + chat)
|
|
============================================================ */
|
|
.app-body {
|
|
flex: 1;
|
|
display: flex;
|
|
margin-top: var(--navbar-height);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
左侧 sidebar
|
|
============================================================ */
|
|
.sidebar {
|
|
width: 280px;
|
|
background: var(--surface-color);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
transition: width 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
width: 44px;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-body,
|
|
.sidebar.collapsed .sidebar-title {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 16px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-header {
|
|
justify-content: center;
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.sidebar-toggle:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-toggle {
|
|
border: none;
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-toggle::before {
|
|
content: '≫';
|
|
}
|
|
|
|
.sidebar-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.sidebar-body::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.sidebar-body::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: 8px 14px 12px;
|
|
border-bottom: 1px solid var(--separator-color, rgba(58, 69, 85, 0.4));
|
|
}
|
|
|
|
.sidebar-section-title {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* 子系统卡片 */
|
|
.subsystem-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 4px;
|
|
background: rgba(15, 24, 40, 0.3);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.subsystem-card.active {
|
|
background: rgba(74, 123, 185, 0.1);
|
|
border-color: rgba(74, 123, 185, 0.3);
|
|
}
|
|
|
|
.subsystem-card.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.subsystem-dot {
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.subsystem-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.subsystem-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.subsystem-tag {
|
|
font-size: 9px;
|
|
background: var(--success-color);
|
|
color: white;
|
|
padding: 1px 5px;
|
|
border-radius: 2px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.subsystem-status {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* 预设按钮 */
|
|
.preset-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.preset-btn {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 7px 10px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--primary-color);
|
|
color: var(--text-primary);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.preset-btn.preset-mini {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.preset-row {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 工具分组 */
|
|
.sidebar-tools-section {
|
|
flex: 1;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tool-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.tool-loading {
|
|
color: var(--text-tertiary);
|
|
font-size: 11px;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tool-group {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tool-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
user-select: none;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tool-group-header:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.tool-group-chevron {
|
|
font-size: 9px;
|
|
color: var(--text-tertiary);
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.tool-group.expanded .tool-group-chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tool-group-name {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tool-group-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
background: var(--background-card);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tool-group-count.all-enabled {
|
|
background: rgba(74, 159, 106, 0.2);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.tool-group-body {
|
|
display: none;
|
|
padding: 2px 0 6px 12px;
|
|
}
|
|
|
|
.tool-group.expanded .tool-group-body {
|
|
display: block;
|
|
}
|
|
|
|
.tool-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
padding: 4px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tool-item:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tool-item input[type="checkbox"] {
|
|
margin: 0;
|
|
margin-top: 2px;
|
|
accent-color: var(--primary-color);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tool-item-name {
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
聊天区
|
|
============================================================ */
|
|
.chat-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
background: var(--chat-bg);
|
|
}
|
|
|
|
.messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 24px 20px 12px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.messages::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.messages::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.messages::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
.messages::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-light);
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-hint {
|
|
text-align: center;
|
|
padding: 100px 20px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
.empty-title {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
margin-bottom: 8px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.empty-sub {
|
|
font-size: 23px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.empty-examples {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.example-card {
|
|
background: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.example-card:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--primary-color);
|
|
color: var(--text-primary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ============================================================
|
|
消息气泡
|
|
============================================================ */
|
|
.msg {
|
|
max-width: 880px;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.msg-avatar {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.msg.user .msg-avatar {
|
|
background: var(--user-bubble);
|
|
color: white;
|
|
}
|
|
|
|
.msg.assistant .msg-avatar {
|
|
background: var(--surface-light);
|
|
color: var(--metal-shine);
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.msg-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.msg.user .msg-body {
|
|
background: var(--user-bubble);
|
|
color: white;
|
|
padding: 10px 14px;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow);
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.msg.assistant .msg-body {
|
|
color: var(--text-primary);
|
|
padding: 4px 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.msg.assistant .msg-body p { margin-bottom: 8px; }
|
|
.msg.assistant .msg-body p:last-child { margin-bottom: 0; }
|
|
|
|
.msg.assistant .msg-body strong { color: var(--metal-shine); font-weight: 600; }
|
|
.msg.assistant .msg-body code {
|
|
background: var(--background-card);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.msg.assistant .msg-body pre {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm);
|
|
overflow-x: auto;
|
|
margin: 8px 0;
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* 流式打字光标 */
|
|
.cursor::after {
|
|
content: '▋';
|
|
color: var(--primary-light);
|
|
animation: blink 1s infinite;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
/* 思考中提示(等待首包) */
|
|
.thinking-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-tertiary);
|
|
font-size: 13px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* 真实思考过程:轻量区块,避免与全局 pre / 正文叠多层边框 */
|
|
.think-panel {
|
|
margin: 0 0 12px;
|
|
padding: 0 0 0 10px;
|
|
border: none;
|
|
border-left: 2px solid rgba(74, 123, 185, 0.45);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
overflow: visible;
|
|
}
|
|
|
|
.think-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.think-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 0 0 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
color: var(--text-tertiary);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.think-panel-header:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.think-panel-chevron {
|
|
opacity: 0.55;
|
|
font-size: 9px;
|
|
}
|
|
|
|
/* 覆盖 .msg.assistant .msg-body pre 的卡片边框/背景 */
|
|
.msg.assistant .msg-body .think-panel-body,
|
|
.think-panel-body {
|
|
margin: 0;
|
|
padding: 0 4px 0 0;
|
|
max-height: 80px;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
color: var(--text-tertiary);
|
|
opacity: 0.92;
|
|
font-family: var(--font-mono);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
/* Firefox:细条 + 主题色,替代系统丑滑块 */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(123, 163, 208, 0.45) transparent;
|
|
}
|
|
|
|
/* 思考区纵向滚动条:与报告表横向条同款中台深色主题 */
|
|
.msg.assistant .msg-body .think-panel-body::-webkit-scrollbar,
|
|
.think-panel-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.msg.assistant .msg-body .think-panel-body::-webkit-scrollbar-track,
|
|
.think-panel-body::-webkit-scrollbar-track {
|
|
background: rgba(155, 179, 207, 0.08);
|
|
border-radius: 999px;
|
|
margin: 2px 0;
|
|
}
|
|
.msg.assistant .msg-body .think-panel-body::-webkit-scrollbar-thumb,
|
|
.think-panel-body::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(74, 123, 185, 0.45),
|
|
rgba(123, 163, 208, 0.65)
|
|
);
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.msg.assistant .msg-body .think-panel-body::-webkit-scrollbar-thumb:hover,
|
|
.think-panel-body::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(74, 123, 185, 0.7),
|
|
rgba(155, 195, 230, 0.85)
|
|
);
|
|
}
|
|
.msg.assistant .msg-body .think-panel-body::-webkit-scrollbar-corner,
|
|
.think-panel-body::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.think-panel.collapsed .think-panel-body {
|
|
display: none;
|
|
}
|
|
|
|
.answer-panel {
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 报告总标题:整页只出现一次(勿塞进模块卡片) */
|
|
.answer-panel > .report-doc-title,
|
|
.msg.assistant .msg-body .report-doc-title {
|
|
margin: 0 0 0.85em;
|
|
padding: 0 0 0.55em;
|
|
font-size: 18px;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
letter-spacing: 0.02em;
|
|
color: var(--metal-shine);
|
|
border-bottom: 1px solid rgba(123, 163, 208, 0.35);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.report-module {
|
|
margin: 0 0 1.75em;
|
|
padding-bottom: 0.25em;
|
|
}
|
|
|
|
.report-module > h2 {
|
|
margin: 0.9em 0 0.55em;
|
|
font-size: 1.15em;
|
|
color: #7BA3D0;
|
|
}
|
|
|
|
.report-module > h3 {
|
|
margin: 0.75em 0 0.4em;
|
|
font-size: 1em;
|
|
color: #7BA3D0;
|
|
}
|
|
|
|
.report-table-direct {
|
|
margin: 0 0 0.85em;
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
overscroll-behavior-x: contain;
|
|
/* Firefox */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(123, 163, 208, 0.45) transparent;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
/* 表格横向滚动条:跟中台深色主题,替代系统默认丑条 */
|
|
.report-table-direct::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 6px;
|
|
}
|
|
.report-table-direct::-webkit-scrollbar-track {
|
|
background: rgba(155, 179, 207, 0.08);
|
|
border-radius: 999px;
|
|
margin: 0 2px;
|
|
}
|
|
.report-table-direct::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(74, 123, 185, 0.45),
|
|
rgba(123, 163, 208, 0.65)
|
|
);
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.report-table-direct::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(74, 123, 185, 0.7),
|
|
rgba(155, 195, 230, 0.85)
|
|
);
|
|
}
|
|
.report-table-direct::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.report-table-direct table {
|
|
width: max-content;
|
|
max-width: 100%;
|
|
table-layout: auto;
|
|
border-collapse: collapse;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(155, 179, 207, 0.28);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.report-table-direct thead {
|
|
background: rgba(74, 123, 185, 0.28);
|
|
}
|
|
|
|
.report-table-direct th,
|
|
.report-table-direct td {
|
|
padding: 7px 12px;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border: 1px solid rgba(155, 179, 207, 0.2);
|
|
}
|
|
|
|
.report-table-direct th {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.report-table-direct tbody tr:nth-child(even) {
|
|
background: rgba(74, 123, 185, 0.06);
|
|
}
|
|
|
|
/* 长文本列(如错题题干)允许换行,避免整表被撑成等宽三列 */
|
|
.report-table-direct td:first-child {
|
|
white-space: normal;
|
|
max-width: 36em;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.report-analysis {
|
|
margin: 0.85em 0 0.35em;
|
|
padding: 12px 14px 14px;
|
|
border-left: 3px solid rgba(74, 123, 185, 0.65);
|
|
background: rgba(24, 35, 52, 0.55);
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
}
|
|
|
|
.report-analysis-head {
|
|
margin: 0 0 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* 模块内思考面板:紧凑,不抢分析正文 */
|
|
.report-analysis .report-module-think {
|
|
margin: 0 0 10px;
|
|
padding-left: 8px;
|
|
}
|
|
.report-analysis .report-module-think .think-panel-body {
|
|
max-height: 72px;
|
|
overflow-y: auto;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.report-analysis-body {
|
|
color: var(--text-primary);
|
|
line-height: 1.7;
|
|
font-size: 13.5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.report-analysis-body p {
|
|
margin: 0 0 0.65em;
|
|
text-align: left;
|
|
}
|
|
|
|
.report-analysis-body p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.report-analysis-body .analysis-kicker,
|
|
.report-analysis-body p.analysis-kicker {
|
|
display: block;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 0.55em 0 0.2em;
|
|
padding: 0;
|
|
font-weight: 600;
|
|
font-size: 13.5px;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
text-align: left;
|
|
text-justify: none;
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
/* 未拆成 kicker 时,单独成段的加粗小标题也上品牌色 */
|
|
.report-analysis-body > p > strong:only-child {
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.report-analysis-body strong {
|
|
display: inline;
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.export-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.export-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-light);
|
|
color: var(--text-secondary);
|
|
padding: 5px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-primary);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.export-btn.export-btn-raw {
|
|
margin-left: 6px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.export-btn.export-btn-raw:hover:not(:disabled) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.export-btn:hover:not(:disabled) {
|
|
border-color: var(--metal-shine);
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.export-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: wait;
|
|
}
|
|
|
|
.export-status {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.export-status.error {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.dot-pulse {
|
|
display: inline-flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dot-pulse span {
|
|
width: 5px;
|
|
height: 5px;
|
|
background: var(--primary-light);
|
|
border-radius: 50%;
|
|
animation: dotPulse 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
|
|
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes dotPulse {
|
|
0%, 60%, 100% { transform: scale(0.8); opacity: 0.5; }
|
|
30% { transform: scale(1.2); opacity: 1; }
|
|
}
|
|
|
|
/* 错误横幅 */
|
|
.error-banner {
|
|
background: rgba(159, 74, 90, 0.15);
|
|
border: 1px solid var(--danger-color);
|
|
color: var(--danger-color);
|
|
padding: 10px 16px;
|
|
border-radius: var(--radius-md);
|
|
margin: 0 auto 16px;
|
|
max-width: 880px;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ============================================================
|
|
工具调用卡片
|
|
============================================================ */
|
|
.tool-card {
|
|
background: var(--chat-card);
|
|
border: 1px solid var(--border-color);
|
|
border-left: 2px solid var(--primary-color);
|
|
border-radius: var(--radius-sm);
|
|
margin: 4px 0;
|
|
overflow: hidden;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tool-card.running {
|
|
border-left-color: var(--warning-color);
|
|
background: rgba(159, 138, 74, 0.05);
|
|
}
|
|
|
|
.tool-card.success {
|
|
border-left-color: var(--success-color);
|
|
}
|
|
|
|
.tool-card.error {
|
|
border-left-color: var(--danger-color);
|
|
background: rgba(159, 74, 90, 0.05);
|
|
}
|
|
|
|
/* 元工具(search/get_detail) — 次级发现卡片,与业务工具区分,风格统一 */
|
|
.tool-card.meta {
|
|
margin: 3px 0;
|
|
background: rgba(107, 140, 191, 0.06);
|
|
border: 1px solid rgba(74, 123, 185, 0.22);
|
|
border-left: 2px solid var(--accent-color);
|
|
}
|
|
|
|
.tool-card.meta.running {
|
|
border-left-color: var(--warning-color);
|
|
background: rgba(159, 138, 74, 0.06);
|
|
border-color: rgba(159, 138, 74, 0.2);
|
|
}
|
|
|
|
.tool-card.meta.success {
|
|
border-left-color: var(--accent-color);
|
|
background: rgba(107, 140, 191, 0.09);
|
|
border-color: rgba(74, 123, 185, 0.28);
|
|
}
|
|
|
|
.tool-card.meta.error {
|
|
border-left-color: var(--danger-color);
|
|
background: rgba(159, 74, 90, 0.06);
|
|
border-color: rgba(159, 74, 90, 0.22);
|
|
}
|
|
|
|
.tool-card.meta .tool-header {
|
|
padding: 4px 10px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.tool-card.meta .tool-header::before {
|
|
content: '发现';
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.4px;
|
|
padding: 1px 5px;
|
|
border-radius: 2px;
|
|
background: rgba(74, 123, 185, 0.18);
|
|
color: var(--primary-light);
|
|
border: 1px solid rgba(74, 123, 185, 0.35);
|
|
flex-shrink: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tool-card.meta .tool-header:hover {
|
|
background: rgba(155, 179, 207, 0.06);
|
|
}
|
|
|
|
.tool-card.meta .tool-name {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tool-card.meta .tool-protocol {
|
|
background: rgba(107, 140, 191, 0.14);
|
|
color: var(--accent-color);
|
|
border-color: rgba(107, 140, 191, 0.32);
|
|
font-size: 9px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
.tool-card.meta .tool-duration {
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.tool-card.meta .tool-status {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tool-card.meta .tool-status.success {
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.tool-card.meta .tool-status.error {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.tool-card.meta .tool-status.running {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.tool-card.meta .tool-chevron {
|
|
font-size: 9px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tool-card.meta .tool-body {
|
|
background: rgba(15, 24, 40, 0.35);
|
|
border-top-color: rgba(74, 123, 185, 0.18);
|
|
}
|
|
|
|
.tool-card.meta .tool-section-content {
|
|
background: rgba(15, 24, 40, 0.6);
|
|
border-color: rgba(74, 123, 185, 0.15);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tool-header:hover {
|
|
background: rgba(155, 179, 207, 0.05);
|
|
}
|
|
|
|
.tool-icon {
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tool-name {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
font-size: 13px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tool-protocol {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.tool-protocol.mcp {
|
|
background: rgba(74, 123, 185, 0.2);
|
|
color: var(--primary-light);
|
|
border: 1px solid rgba(74, 123, 185, 0.4);
|
|
}
|
|
|
|
.tool-protocol.http {
|
|
background: rgba(155, 179, 207, 0.15);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.tool-duration {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.tool-status {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tool-status.success { color: var(--success-color); }
|
|
.tool-status.error { color: var(--danger-color); }
|
|
.tool-status.running { color: var(--warning-color); }
|
|
|
|
.tool-chevron {
|
|
color: var(--text-tertiary);
|
|
font-size: 10px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.tool-card.expanded .tool-chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tool-body {
|
|
display: none;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
background: rgba(15, 24, 40, 0.5);
|
|
}
|
|
|
|
.tool-card.expanded .tool-body {
|
|
display: block;
|
|
}
|
|
|
|
.tool-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tool-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tool-section-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tool-section-content {
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
overflow-x: auto;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* 工具卡片 JSON 折叠 */
|
|
.tool-section-content.collapsed {
|
|
max-height: 60px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.tool-section-content.collapsed::after {
|
|
content: '... (点击展开)';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: var(--background-dark);
|
|
padding: 2px 6px;
|
|
color: var(--text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ============================================================
|
|
输入区
|
|
============================================================ */
|
|
.input-area {
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--surface-color);
|
|
padding: 18px 20px 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-row {
|
|
position: relative;
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 20px 70px 20px 22px;
|
|
border-radius: var(--radius-lg);
|
|
font-family: var(--font-primary);
|
|
font-size: 15px;
|
|
resize: none;
|
|
min-height: 88px;
|
|
max-height: 280px;
|
|
line-height: 1.6;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
outline: none;
|
|
display: block;
|
|
}
|
|
|
|
.input:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(74, 123, 185, 0.15);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* textarea 内部滚动条美化 */
|
|
.input::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.input::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.input::-webkit-scrollbar-thumb {
|
|
background: var(--border-light);
|
|
border-radius: 3px;
|
|
}
|
|
.input::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
.btn-send {
|
|
position: absolute;
|
|
right: 14px;
|
|
bottom: 14px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
box-shadow: 0 2px 6px rgba(74, 123, 185, 0.4), inset 0 1px 0 rgba(155, 179, 207, 0.25);
|
|
}
|
|
|
|
.btn-send:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 6px rgba(74, 123, 185, 0.5);
|
|
}
|
|
|
|
.btn-send:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-send:disabled {
|
|
background: var(--surface-light);
|
|
color: var(--text-tertiary);
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-send svg {
|
|
display: block;
|
|
}
|
|
|
|
.btn-send .icon-send {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
|
|
.btn-send .icon-stop {
|
|
display: none;
|
|
}
|
|
|
|
.btn-send.is-stop .icon-send {
|
|
display: none;
|
|
}
|
|
|
|
.btn-send.is-stop .icon-stop {
|
|
display: block;
|
|
}
|
|
|
|
.abort-note {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.input-hint {
|
|
max-width: 880px;
|
|
margin: 6px auto 0;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
text-align: right;
|
|
}
|
|
|
|
.input-hint.error { color: var(--danger-color); }
|
|
.input-hint.busy { color: var(--warning-color); }
|
|
|
|
/* ============================================================
|
|
响应式
|
|
============================================================ */
|
|
@media (max-width: 768px) {
|
|
.navbar {
|
|
padding: 0 12px;
|
|
flex-direction: column;
|
|
height: auto;
|
|
align-items: stretch;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.navbar-status {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
}
|
|
|
|
.chat-area {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.messages {
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
.input-area {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.navbar-subtitle {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
模型源 + 子系统状态(新)
|
|
============================================================ */
|
|
.sidebar-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.think-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.think-btn:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.think-btn.active {
|
|
background: rgba(74, 123, 185, 0.25);
|
|
border-color: var(--primary-color);
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.config-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.config-btn:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--metal-shine);
|
|
transform: rotate(30deg);
|
|
}
|
|
|
|
.source-toggle {
|
|
display: flex;
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px;
|
|
gap: 2px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.source-btn {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.source-btn:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.source-btn.active {
|
|
background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
|
|
color: white;
|
|
}
|
|
|
|
.source-info {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
padding: 4px 8px;
|
|
background: var(--background-card);
|
|
border-radius: 3px;
|
|
border-left: 2px solid var(--text-tertiary);
|
|
}
|
|
|
|
.source-info.cloud {
|
|
border-left-color: var(--accent-color);
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.source-info.local {
|
|
border-left-color: var(--success-color);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
/* 子系统状态 */
|
|
.subsystem-summary {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
background: var(--background-card);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.subsystem-card.error {
|
|
background: rgba(159, 74, 90, 0.1);
|
|
border-color: rgba(159, 74, 90, 0.3);
|
|
}
|
|
|
|
.subsystem-card.offline {
|
|
background: rgba(15, 24, 40, 0.3);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 工具项:中文标签 + 英文名 */
|
|
.tool-item {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.tool-item-label {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.tool-item-name {
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
line-height: 1.3;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tool-item:hover .tool-item-name {
|
|
color: var(--text-secondary);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tool-item input[type="checkbox"] {
|
|
position: absolute;
|
|
margin: 0;
|
|
right: 8px;
|
|
top: 8px;
|
|
}
|
|
|
|
/* ============================================================
|
|
empty-logo(图片版)
|
|
============================================================ */
|
|
.empty-logo {
|
|
width: 196px;
|
|
height: 196px;
|
|
margin: 0 auto 20px;
|
|
display: block;
|
|
filter: drop-shadow(0 4px 16px rgba(74, 123, 185, 0.4));
|
|
animation: logoFloat 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes logoFloat {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
/* ============================================================
|
|
配置对话框
|
|
============================================================ */
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
animation: fadeIn 0.2s;
|
|
}
|
|
|
|
body.modal-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dialog {
|
|
background: var(--surface-color);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
|
width: 90vw;
|
|
max-width: 580px;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--background-card);
|
|
}
|
|
|
|
.dialog-header h2 {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dialog-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius-sm);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.dialog-close:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dialog-tabs {
|
|
display: flex;
|
|
background: var(--background-card);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dialog-tab {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
padding: 12px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.dialog-tab:hover {
|
|
color: var(--text-secondary);
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.dialog-tab.active {
|
|
color: var(--metal-shine);
|
|
border-bottom-color: var(--primary-color);
|
|
}
|
|
|
|
.dialog-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.dialog-body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.dialog-pane {
|
|
display: none;
|
|
}
|
|
|
|
.dialog-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
.form-row {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.form-row label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.form-row input[type="text"],
|
|
.form-row input[type="password"],
|
|
.form-row input[type="number"] {
|
|
width: 100%;
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
font-family: var(--font-mono);
|
|
outline: none;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.form-row input:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(74, 123, 185, 0.15);
|
|
}
|
|
|
|
.form-row small {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.form-row.form-row-2,
|
|
.form-row.form-row-3 {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-row.form-row-2 { grid-template-columns: 1fr 1fr; }
|
|
.form-row.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
|
|
|
|
.input-with-action {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.input-with-action input {
|
|
padding-right: 40px !important;
|
|
}
|
|
|
|
.btn-toggle-pw {
|
|
position: absolute;
|
|
right: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
padding: 6px 8px;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.btn-toggle-pw:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.radio-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.radio-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.radio-label:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.radio-label input {
|
|
accent-color: var(--primary-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio-label input:checked + span {
|
|
color: var(--metal-shine);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.radio-row-wrap {
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
}
|
|
|
|
.advanced {
|
|
margin-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.advanced[open] {
|
|
max-height: none;
|
|
}
|
|
|
|
.advanced .form-row {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.advanced .form-row:first-of-type {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.advanced summary {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-weight: 600;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.advanced summary:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.form-hint {
|
|
background: rgba(74, 123, 185, 0.08);
|
|
border: 1px solid rgba(74, 123, 185, 0.2);
|
|
border-left: 3px solid var(--primary-color);
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.form-hint code {
|
|
background: var(--background-dark);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
padding: 14px 20px;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--background-card);
|
|
}
|
|
|
|
.btn-cancel, .btn-save {
|
|
padding: 8px 20px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-save {
|
|
background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
|
|
border: none;
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(74, 123, 185, 0.4);
|
|
}
|
|
|
|
.btn-save:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 6px rgba(74, 123, 185, 0.5);
|
|
}
|
|
|
|
.leave-dialog {
|
|
max-width: 440px;
|
|
}
|
|
|
|
.leave-dialog-lead {
|
|
margin: 0 0 10px;
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.leave-dialog-hint {
|
|
margin: 0 0 8px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.leave-dialog-footer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.leave-dialog-footer .btn-keep {
|
|
background: transparent;
|
|
border: 1px solid var(--border-light);
|
|
color: var(--text-secondary);
|
|
padding: 8px 14px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: var(--font-primary);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.leave-dialog-footer .btn-keep:hover {
|
|
border-color: var(--metal-shine);
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* 响应式:小屏幕对话框 */
|
|
@media (max-width: 768px) {
|
|
.dialog {
|
|
width: 95vw;
|
|
max-height: 95vh;
|
|
}
|
|
.form-row.form-row-3 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
自定义预设
|
|
============================================================ */
|
|
.custom-presets {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.preset-empty {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
padding: 8px;
|
|
text-align: center;
|
|
background: var(--background-card);
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.custom-preset-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.custom-preset-item:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.custom-preset-apply {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
padding: 7px 10px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
font-family: var(--font-primary);
|
|
min-width: 0;
|
|
}
|
|
|
|
.custom-preset-apply:hover {
|
|
color: var(--text-primary);
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.preset-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.preset-count {
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-tertiary);
|
|
background: var(--surface-light);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-preset-delete {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
width: 24px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
border-left: 1px solid var(--border-color);
|
|
transition: all 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-preset-delete:hover {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================================
|
|
Markdown 渲染样式(在 assistant 消息气泡内)
|
|
============================================================ */
|
|
.msg.assistant .msg-body h1,
|
|
.msg.assistant .msg-body h2,
|
|
.msg.assistant .msg-body h3 {
|
|
color: var(--metal-shine);
|
|
font-weight: 600;
|
|
margin: 12px 0 6px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.msg.assistant .msg-body h1 { font-size: 17px; }
|
|
.msg.assistant .msg-body h2 { font-size: 15px; }
|
|
.msg.assistant .msg-body h3 { font-size: 14px; }
|
|
|
|
.msg.assistant .msg-body h1:first-child,
|
|
.msg.assistant .msg-body h2:first-child,
|
|
.msg.assistant .msg-body h3:first-child,
|
|
.msg.assistant .msg-body p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.msg.assistant .msg-body ul,
|
|
.msg.assistant .msg-body ol {
|
|
margin: 8px 0;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.msg.assistant .msg-body li {
|
|
margin-bottom: 4px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.msg.assistant .msg-body ul li::marker {
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.msg.assistant .msg-body ol li::marker {
|
|
color: var(--primary-light);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.msg.assistant .msg-body em {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.msg.assistant .msg-body strong {
|
|
color: var(--metal-shine);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.msg.assistant .msg-body a {
|
|
color: var(--primary-light);
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--primary-light);
|
|
}
|
|
|
|
.msg.assistant .msg-body a:hover {
|
|
color: var(--metal-shine);
|
|
border-bottom-color: var(--metal-shine);
|
|
}
|
|
|
|
.msg.assistant .msg-body blockquote {
|
|
border-left: 3px solid var(--primary-color);
|
|
padding: 6px 12px;
|
|
margin: 8px 0;
|
|
background: rgba(74, 123, 185, 0.08);
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.msg.assistant .msg-body table {
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
font-size: 13px;
|
|
width: auto;
|
|
max-width: 100%;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(155, 179, 207, 0.25);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.msg.assistant .msg-body thead {
|
|
background: rgba(74, 123, 185, 0.22);
|
|
}
|
|
|
|
.msg.assistant .msg-body th,
|
|
.msg.assistant .msg-body td {
|
|
padding: 6px 12px;
|
|
border: 1px solid rgba(155, 179, 207, 0.18);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.msg.assistant .msg-body th {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.msg.assistant .msg-body td {
|
|
color: var(--text-primary);
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.msg.assistant .msg-body tbody tr:nth-child(even) {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.msg.assistant .msg-body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
子系统 block(可折叠,含工具列表)
|
|
============================================================ */
|
|
.sidebar-collapsible-title {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.sidebar-collapsible-title:hover {
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.sidebar-collapsible-title .collapse-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.sidebar-collapsible-title:hover .collapse-btn {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.subsystems-section.section-collapsed .subsystems-list {
|
|
display: none;
|
|
}
|
|
|
|
.subsystems-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.subsystem-block {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.subsystem-block.active {
|
|
border-left: 3px solid var(--success-color);
|
|
background: rgba(74, 159, 106, 0.05);
|
|
}
|
|
|
|
.subsystem-block.disabled,
|
|
.subsystem-block.offline {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.subsystem-block.error {
|
|
border-left: 3px solid var(--danger-color);
|
|
background: rgba(159, 74, 90, 0.05);
|
|
}
|
|
|
|
.subsystem-block-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 10px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.subsystem-block-header:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.subsystem-block-toggle {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.subsystem-block-name {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--metal-shine);
|
|
letter-spacing: 0.5px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.subsystem-block.disabled .subsystem-block-name,
|
|
.subsystem-block.offline .subsystem-block-name {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.subsystem-dot {
|
|
font-size: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.subsystem-status {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.subsystem-block-body {
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 8px 10px;
|
|
background: rgba(15, 24, 40, 0.4);
|
|
}
|
|
|
|
.subsystem-block.collapsed .subsystem-block-body {
|
|
display: none;
|
|
}
|
|
|
|
.subsystem-empty {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
padding: 6px 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subsystem-empty.subsystem-error {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.subsystem-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px dashed var(--border-color);
|
|
}
|
|
|
|
.mini-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.mini-btn:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* 强调按钮(已废弃,保留以防引用)*/
|
|
.mini-btn.mini-btn-accent {
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
border-color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mini-btn.mini-btn-accent:hover {
|
|
background: var(--primary-color);
|
|
filter: brightness(1.1);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 开关型按钮(profile 深度诊断)*/
|
|
.mini-btn.mini-btn-toggle.active {
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
border-color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mini-btn.mini-btn-toggle.active:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.tools-count {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
background: var(--background-dark);
|
|
padding: 2px 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ============================================================
|
|
自定义 checkbox(勾可视)
|
|
============================================================ */
|
|
.tool-item input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1.5px solid var(--border-light);
|
|
border-radius: 3px;
|
|
background: var(--background-dark);
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
margin-top: 2px;
|
|
transition: all 0.15s;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.tool-item input[type="checkbox"]:hover {
|
|
border-color: var(--primary-light);
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.tool-item input[type="checkbox"]:checked {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 6px rgba(74, 123, 185, 0.4);
|
|
}
|
|
|
|
.tool-item input[type="checkbox"]:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 1px;
|
|
width: 4px;
|
|
height: 8px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* 工具项重新调整为 grid,让 checkbox 在左 */
|
|
.tool-item {
|
|
display: grid;
|
|
grid-template-columns: 16px 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 4px 8px;
|
|
padding: 6px 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.tool-item input[type="checkbox"] {
|
|
grid-row: 1 / 3;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.tool-item-label {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.tool-item-name {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
line-height: 1.3;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tool-item:hover .tool-item-name {
|
|
color: var(--text-secondary);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
预设场景美化
|
|
============================================================ */
|
|
.custom-presets {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.preset-empty {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
padding: 12px 8px;
|
|
text-align: center;
|
|
background: var(--background-card);
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.custom-preset-item {
|
|
display: flex;
|
|
align-items: stretch;
|
|
background: linear-gradient(135deg, var(--background-card) 0%, var(--surface-color) 100%);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
transition: all 0.15s;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.custom-preset-item:hover {
|
|
border-color: var(--primary-color);
|
|
transform: translateX(2px);
|
|
box-shadow: 0 2px 6px rgba(74, 123, 185, 0.2);
|
|
}
|
|
|
|
.custom-preset-apply {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
padding: 9px 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-family: var(--font-primary);
|
|
min-width: 0;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.custom-preset-apply:hover {
|
|
background: rgba(74, 123, 185, 0.08);
|
|
}
|
|
|
|
.preset-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preset-count {
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
color: var(--metal-shine);
|
|
background: rgba(74, 123, 185, 0.15);
|
|
border: 1px solid rgba(74, 123, 185, 0.3);
|
|
padding: 2px 7px;
|
|
border-radius: 10px;
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.custom-preset-delete {
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 1px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
width: 28px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: all 0.15s;
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.custom-preset-delete:hover {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
}
|
|
|
|
/* 配置按钮 +(保存预设) */
|
|
#btn-save-preset {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
#btn-save-preset:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* ============================================================
|
|
审计日志
|
|
============================================================ */
|
|
.audit-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
background: var(--background-card);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.audit-actions {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.audit-actions .mini-btn {
|
|
flex: 1;
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.audit-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
max-height: 360px;
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.audit-list::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.audit-list::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.audit-empty {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
padding: 16px 8px;
|
|
text-align: center;
|
|
background: var(--background-card);
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.audit-item {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-left: 2px solid var(--text-tertiary);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.audit-item:hover {
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
/* 类型颜色 */
|
|
.audit-item.audit-user { border-left-color: var(--primary-color); }
|
|
.audit-item.audit-assistant { border-left-color: var(--accent-color); }
|
|
.audit-item.audit-tool-start { border-left-color: var(--warning-color); }
|
|
.audit-item.audit-tool-end { border-left-color: var(--success-color); }
|
|
.audit-item.audit-system { border-left-color: var(--text-secondary); }
|
|
.audit-item.audit-error { border-left-color: var(--danger-color); background: rgba(159, 74, 90, 0.05); }
|
|
|
|
.audit-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
user-select: none;
|
|
}
|
|
|
|
.audit-item-header:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.audit-time {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.audit-type {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
flex-shrink: 0;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.audit-summary {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.audit-item.audit-error .audit-summary {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.audit-chevron {
|
|
font-size: 9px;
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.audit-item-body {
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 8px 10px;
|
|
background: rgba(15, 24, 40, 0.6);
|
|
}
|
|
|
|
.audit-item-body pre {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
line-height: 1.5;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.audit-no-detail {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
padding: 4px;
|
|
}
|
|
|
|
.audit-more {
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================================
|
|
审计日志 sidebar 入口按钮
|
|
============================================================ */
|
|
.audit-open-btn {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, var(--background-card) 0%, var(--surface-color) 100%);
|
|
border: 1px solid var(--border-color);
|
|
border-left: 3px solid var(--primary-color);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
text-align: left;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.audit-open-btn:hover {
|
|
border-color: var(--primary-color);
|
|
transform: translateX(2px);
|
|
box-shadow: 0 2px 6px rgba(74, 123, 185, 0.2);
|
|
}
|
|
|
|
.audit-open-icon {
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.audit-open-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.audit-open-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.audit-open-sub {
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.audit-open-arrow {
|
|
font-size: 16px;
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.audit-open-btn:hover .audit-open-arrow {
|
|
transform: translateX(3px);
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 脱敏会话状态(纯左下角文字,无容器)
|
|
* spec: docs/guides/webui-profile-masking-placeholder-spec.md §v3.1 TTL
|
|
* ============================================================ */
|
|
.masking-status {
|
|
padding: 8px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-tertiary);
|
|
opacity: 0.75;
|
|
border-top: 1px solid rgba(155, 179, 207, 0.1);
|
|
flex-shrink: 0;
|
|
cursor: pointer; /* 可点击 */
|
|
transition: opacity 0.15s, background 0.15s;
|
|
}
|
|
|
|
.masking-status:hover {
|
|
opacity: 1;
|
|
background: rgba(74, 123, 185, 0.08);
|
|
}
|
|
|
|
.masking-status-dot {
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.masking-status.state-active { color: #4CAF50; opacity: 0.9; }
|
|
.masking-status.state-expiring { color: #FFA000; opacity: 0.9; }
|
|
.masking-status.state-expired { color: #e53935; opacity: 0.9; }
|
|
.masking-status.state-none { color: var(--text-tertiary); }
|
|
|
|
/* ============================================================
|
|
审计日志弹窗
|
|
============================================================ */
|
|
.audit-dialog {
|
|
width: 95vw;
|
|
max-width: 980px;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.audit-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--background-card);
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.audit-filters {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
padding: 3px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.filter-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
padding: 5px 12px;
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
|
|
color: white;
|
|
}
|
|
|
|
.audit-toolbar-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.audit-toolbar-actions .mini-btn {
|
|
padding: 5px 14px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.mini-btn.danger-btn:hover {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
border-color: var(--danger-color);
|
|
}
|
|
|
|
.audit-table-wrapper {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.audit-table-head {
|
|
display: grid;
|
|
grid-template-columns: 80px 90px 1fr 30px;
|
|
gap: 0;
|
|
background: var(--background-card);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.audit-table-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.audit-table-body::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.audit-table-body::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
.audit-table-body::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-light);
|
|
}
|
|
|
|
.audit-row {
|
|
display: grid;
|
|
grid-template-columns: 80px 90px 1fr 30px;
|
|
gap: 0;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid rgba(58, 69, 85, 0.4);
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
min-height: 36px;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.audit-row:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.audit-row.expanded {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.audit-row .col-time {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.audit-row .col-type {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.audit-row .col-summary {
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.audit-row .col-action {
|
|
text-align: center;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.expand-icon {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* 类型颜色 */
|
|
.audit-row.audit-user { border-left-color: var(--primary-color); }
|
|
.audit-row.audit-user .col-type { color: var(--primary-light); }
|
|
.audit-row.audit-assistant { border-left-color: var(--accent-color); }
|
|
.audit-row.audit-assistant .col-type { color: var(--accent-color); }
|
|
.audit-row.audit-tool-start { border-left-color: var(--warning-color); }
|
|
.audit-row.audit-tool-start .col-type { color: var(--warning-color); }
|
|
.audit-row.audit-tool-end { border-left-color: var(--success-color); }
|
|
.audit-row.audit-tool-end .col-type { color: var(--success-color); }
|
|
.audit-row.audit-system { border-left-color: var(--text-secondary); }
|
|
.audit-row.audit-error {
|
|
border-left-color: var(--danger-color);
|
|
background: rgba(159, 74, 90, 0.05);
|
|
}
|
|
.audit-row.audit-error .col-summary { color: var(--danger-color); }
|
|
.audit-row.audit-error .col-type { color: var(--danger-color); }
|
|
|
|
.audit-detail {
|
|
padding: 12px 20px;
|
|
background: rgba(15, 24, 40, 0.6);
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-left: 3px solid var(--primary-light);
|
|
}
|
|
|
|
.audit-detail pre {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.audit-empty {
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
color: var(--text-tertiary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.audit-stats {
|
|
padding: 8px 20px;
|
|
background: var(--background-card);
|
|
border-top: 1px solid var(--border-color);
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.audit-stats b {
|
|
color: var(--metal-shine);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ============================================================
|
|
CSS 图标替代 emoji(齿轮/圆点/方块等)
|
|
============================================================ */
|
|
/* 子系统状态圆点(替代 🟢 ⚪ 🔴 ⚫) */
|
|
.css-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.css-dot.dot-active {
|
|
background: var(--success-color);
|
|
box-shadow: 0 0 6px rgba(74, 159, 106, 0.5);
|
|
}
|
|
|
|
.css-dot.dot-disabled {
|
|
background: transparent;
|
|
border: 1.5px solid var(--text-tertiary);
|
|
}
|
|
|
|
.css-dot.dot-error {
|
|
background: var(--danger-color);
|
|
box-shadow: 0 0 6px rgba(159, 74, 90, 0.5);
|
|
}
|
|
|
|
.css-dot.dot-offline {
|
|
background: var(--border-light);
|
|
}
|
|
|
|
/* 工具卡片左侧小方块(替代 🔧) */
|
|
.tool-icon {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--primary-color);
|
|
border-radius: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tool-card.running .tool-icon {
|
|
background: var(--warning-color);
|
|
animation: pulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
.tool-card.success .tool-icon {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
.tool-card.meta .tool-icon {
|
|
width: 5px;
|
|
height: 5px;
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.tool-card.meta.running .tool-icon {
|
|
background: var(--warning-color);
|
|
}
|
|
|
|
.tool-card.meta.success .tool-icon {
|
|
background: var(--primary-light);
|
|
}
|
|
|
|
.tool-card.meta.error .tool-icon {
|
|
background: var(--danger-color);
|
|
}
|
|
|
|
.tool-card.error .tool-icon {
|
|
background: var(--danger-color);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(0.8); }
|
|
}
|
|
|
|
/* 错误横幅前缀 */
|
|
.error-prefix {
|
|
font-weight: 600;
|
|
color: var(--danger-color);
|
|
padding-right: 8px;
|
|
border-right: 1px solid rgba(159, 74, 90, 0.3);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* audit-open-btn 没有 icon 时的布局兼容 */
|
|
.audit-open-btn {
|
|
border-left: 3px solid var(--primary-color);
|
|
}
|
|
|
|
/* ============================================================
|
|
恢复对话提示 banner
|
|
============================================================ */
|
|
.restore-banner {
|
|
max-width: 880px;
|
|
margin: 0 auto 12px;
|
|
background: rgba(74, 123, 185, 0.1);
|
|
border: 1px solid rgba(74, 123, 185, 0.3);
|
|
border-left: 3px solid var(--primary-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 8px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.restore-banner span:first-child {
|
|
font-weight: 500;
|
|
color: var(--metal-shine);
|
|
}
|
|
|
|
.restore-hint {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* 恢复默认预设按钮 */
|
|
.restore-default-btn {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: 1px dashed var(--border-color);
|
|
color: var(--text-tertiary);
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
margin-top: 6px;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.restore-default-btn:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-light);
|
|
background: rgba(74, 123, 185, 0.05);
|
|
}
|
|
|
|
/* 预设 section 折叠 + actions 布局 */
|
|
.presets-section.section-collapsed .presets-body {
|
|
display: none;
|
|
}
|
|
|
|
.presets-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.presets-actions .config-btn {
|
|
flex: 0 0 auto;
|
|
width: 28px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
.presets-actions .config-btn:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.presets-actions .restore-default-btn {
|
|
flex: 1;
|
|
width: auto;
|
|
margin-top: 0;
|
|
font-size: 11px;
|
|
padding: 5px 10px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* ============================================================
|
|
工具调用进度条(SSE 流式)
|
|
============================================================ */
|
|
.tool-progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.progress-stage {
|
|
font-size: 12px;
|
|
color: var(--metal-shine);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: var(--background-dark);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
|
|
transition: width 0.3s ease;
|
|
box-shadow: 0 0 4px rgba(74, 123, 185, 0.5);
|
|
}
|
|
|
|
.progress-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.progress-detail {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* 模型下拉 + 刷新按钮 */
|
|
.input-with-action select {
|
|
flex: 1;
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
font-family: var(--font-mono);
|
|
outline: none;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239BB3CF' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.input-with-action select:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-refresh-models {
|
|
position: absolute;
|
|
right: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-refresh-models:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
/* footer 默认启动源下拉(和取消按钮同风格) */
|
|
.footer-default-source {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.footer-default-source label {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-default-source select {
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 7px 28px 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-primary);
|
|
cursor: pointer;
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237B8A9F' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 9px center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.footer-default-source select:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
.footer-default-source select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(74, 123, 185, 0.15);
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
/* footer 压缩阈值 */
|
|
.footer-context-threshold {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.footer-context-threshold label {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-context-threshold input {
|
|
width: 70px;
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 5px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
text-align: center;
|
|
outline: none;
|
|
}
|
|
|
|
.footer-context-threshold input:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.footer-context-threshold span {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* 所有 dialog-pane 内的 select 统一样式(和 footer-default-source 一致) */
|
|
.dialog-pane select {
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 7px 28px 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-primary);
|
|
cursor: pointer;
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237B8A9F' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 9px center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.dialog-pane select:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
.dialog-pane select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(74, 123, 185, 0.15);
|
|
}
|
|
|
|
/* form-row 里直接放的 select(如压缩阈值)占满宽度 */
|
|
.form-row > select {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Sparkle 引擎管理区(配置弹窗「本地 Sparkle」tab 顶部)
|
|
* 状态用 CSS 圆点表示,不用 emoji
|
|
* ============================================================ */
|
|
|
|
.engine-section {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-color);
|
|
padding: 12px 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.engine-status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.engine-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.engine-dot.is-loading {
|
|
background: var(--warning-color);
|
|
animation: engineDotPulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.engine-dot.is-ready {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
@keyframes engineDotPulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
.engine-status-text {
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.engine-live-stats {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.engine-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.engine-actions button {
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 6px 16px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.engine-actions button:hover:not(:disabled) {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.engine-actions button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.engine-params {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.engine-param-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.engine-param-row label {
|
|
width: 90px;
|
|
flex-shrink: 0;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.engine-param-row input[type="range"] {
|
|
flex: 1;
|
|
accent-color: var(--primary-color);
|
|
}
|
|
|
|
.engine-param-row input[type="number"] {
|
|
width: 80px;
|
|
background: var(--background-dark);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 5px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
outline: none;
|
|
}
|
|
|
|
.engine-param-row input:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.engine-param-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.engine-params-apply {
|
|
align-self: flex-end;
|
|
background: var(--surface-light);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 5px 14px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.engine-params-apply:hover:not(:disabled) {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.engine-params-apply:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.engine-note {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|