agent-Specialization/static/src/styles/components/panels/_left-panel.scss

819 lines
16 KiB
SCSS

/* 拖拽手柄 */
.resize-handle {
width: 4px;
background: var(--claude-left-rail);
cursor: col-resize;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.resize-handle:hover {
background: var(--claude-highlight);
}
.workspace-region {
display: flex;
align-items: stretch;
flex-shrink: 0;
}
/* 侧边栏 */
.sidebar {
background: var(--claude-left-rail);
overflow-y: auto;
flex-shrink: 0;
border-left: none;
}
.sidebar.left-sidebar {
display: flex;
flex-direction: column;
transition:
width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.workspace-panel {
flex: 0 0 auto;
will-change: width, transform, opacity;
transition:
width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.workspace-panel--collapsed {
flex: 0 0 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
opacity: 0;
transform: translateY(-70px);
overflow: hidden;
pointer-events: none;
}
.sidebar-status {
padding: 18px 18px 8px;
}
.compact-status-card {
background: var(--claude-panel);
border: 1px solid var(--claude-border);
border-radius: 18px;
padding: 14px 16px;
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
display: flex;
align-items: center;
}
.status-line {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 18px;
}
.status-brand {
display: flex;
align-items: center;
gap: 12px;
}
.status-logo {
color: var(--claude-accent);
}
.status-logo-image {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-logo-inline svg {
width: 100%;
height: 100%;
display: block;
}
.status-logo-inline {
color: var(--claude-text);
}
.brand-text {
display: flex;
align-items: baseline;
gap: 8px;
font-weight: 600;
color: var(--claude-text);
}
.brand-name {
font-size: 16px;
}
.status-indicators {
display: flex;
align-items: center;
gap: 10px;
}
.mode-indicator {
--mode-indicator-color-1: var(--claude-accent);
--mode-indicator-color-2: var(--claude-accent-strong);
--mode-indicator-shadow: rgba(189, 93, 58, 0.25);
border: none;
cursor: pointer;
outline: none;
padding: 0;
width: 36px;
height: 36px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2));
color: #fffef8;
box-shadow: 0 8px 20px var(--mode-indicator-shadow);
transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease;
}
.mode-indicator:hover {
transform: translateY(-1px);
}
.mode-indicator:focus-visible {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 8px 20px var(--mode-indicator-shadow);
}
.mode-indicator.fast {
--mode-indicator-color-1: #ffe08c;
--mode-indicator-color-2: #f7b23c;
--mode-indicator-shadow: rgba(247, 178, 60, 0.35);
}
.mode-indicator.thinking {
--mode-indicator-color-1: var(--claude-accent);
--mode-indicator-color-2: var(--claude-accent-strong);
--mode-indicator-shadow: rgba(189, 93, 58, 0.3);
}
.mode-indicator.deep {
--mode-indicator-color-1: var(--claude-deep);
--mode-indicator-color-2: var(--claude-deep-strong);
--mode-indicator-shadow: rgba(208, 122, 20, 0.35);
}
.mode-indicator .icon {
--icon-size: 18px;
color: inherit;
}
.connection-dot {
width: 12px;
height: 12px;
border-radius: 6px;
background: #e34d4d;
transition: background 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: visible;
}
.connection-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #e34d4d;
animation: statusPulse 2.4s ease-out infinite;
}
.connection-dot.active {
background: var(--claude-success);
}
.connection-dot.active::after {
background: var(--claude-success);
}
.mode-icon-enter-active,
.mode-icon-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mode-icon-enter-from,
.mode-icon-leave-to {
opacity: 0;
transform: scale(0.5) rotate(8deg);
}
@keyframes statusPulse {
0% {
transform: scale(1);
opacity: 0.35;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
.sidebar-header {
padding: 23px;
border-bottom: 1px solid var(--claude-border);
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.85);
z-index: 10;
backdrop-filter: blur(16px);
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--claude-text);
margin: 0;
}
.sidebar-manage-btn {
border: 1px solid rgba(118, 103, 84, 0.25);
background: rgba(255, 255, 255, 0.75);
color: var(--claude-text);
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.sidebar-manage-btn:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(118, 103, 84, 0.45);
}
.sidebar-view-toggle {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid rgba(118, 103, 84, 0.3);
background: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.2s ease;
color: var(--claude-text);
}
.sidebar-view-toggle:hover {
background: rgba(255, 255, 255, 0.95);
}
.sidebar-panel-card-wrapper {
padding: 0 18px 24px;
flex: 1 1 auto;
display: flex;
min-height: 0;
}
.sidebar-panel-card {
background: var(--claude-panel);
border: 1px solid var(--claude-border);
border-radius: 18px;
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.sidebar-panel-card .sidebar-header {
border-radius: 18px 18px 0 0;
}
.sidebar-panel-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
background: var(--claude-sidebar);
padding: 6px 12px 24px;
border-radius: 0 0 18px 18px;
border-top: 1px solid rgba(118, 103, 84, 0.12);
}
.panel-menu-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.panel-menu {
position: absolute;
left: calc(100% + 8px);
top: 0;
display: flex;
gap: 6px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(118, 103, 84, 0.2);
border-radius: 8px;
padding: 6px 8px;
box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12);
z-index: 20;
}
.panel-menu button {
border: none;
background: transparent;
font-size: 18px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
}
.panel-menu button.active {
background: rgba(108, 92, 231, 0.1);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.sidebar.right-sidebar.collapsed {
width: 0 !important;
min-width: 0 !important;
border-left: none;
overflow: hidden;
opacity: 0;
transform: translateX(8px);
}
.sidebar.right-sidebar.collapsed .sidebar-header,
.sidebar.right-sidebar.collapsed .focused-files,
.sidebar.right-sidebar.collapsed .approval-panel-body {
opacity: 0;
pointer-events: none;
}
/* 文件树 */
.file-tree {
flex: 1 1 auto;
min-height: 0;
padding: 16px 20px 24px;
color: var(--claude-text);
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.file-tree::-webkit-scrollbar {
width: 0;
height: 0;
}
.todo-panel {
padding: 16px 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sub-agent-panel {
padding: 16px 20px 24px;
}
.sub-agent-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.sub-agent-card {
border: 1px solid rgba(118, 103, 84, 0.2);
border-radius: 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.92);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
[data-theme="dark"] & {
background: rgba(30, 30, 30, 0.6);
border-color: rgba(255, 255, 255, 0.1);
}
}
.sub-agent-card:hover {
border-color: #6c5ce7;
box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15);
[data-theme="dark"] & {
border-color: #8b7ce7;
box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25);
}
}
.sub-agent-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-bottom: 6px;
}
.sub-agent-status {
text-transform: capitalize;
font-size: 12px;
}
.sub-agent-status.running {
color: #0984e3;
}
.sub-agent-status.completed {
color: #00b894;
}
.sub-agent-status.failed,
.sub-agent-status.timeout {
color: #d63031;
}
.sub-agent-summary {
font-size: 13px;
color: var(--claude-text);
margin-bottom: 4px;
}
.background-command-summary {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sub-agent-tool {
font-size: 12px;
color: var(--claude-text-secondary);
}
.todo-empty,
.sub-agent-empty,
.file-tree-empty {
font-size: 14px;
color: var(--claude-text-secondary);
padding: 10px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
border: 1px dashed var(--claude-border);
text-align: center;
[data-theme="dark"] & {
background: rgba(20, 20, 20, 0.9);
border-color: rgba(255, 255, 255, 0.12);
}
}
.file-tree-empty--host {
text-align: left;
}
.host-workspace-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.host-workspace-switcher {
display: flex;
flex-direction: column;
gap: 10px;
}
.host-workspace-header-box {
width: min(100%, 360px);
margin: 0 auto;
border-radius: 12px;
border: 1px dashed var(--claude-border-strong);
background: var(--theme-surface-muted);
padding: 10px 12px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.host-workspace-add-btn {
position: absolute;
right: 10px;
width: 22px;
height: 22px;
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
padding: 0;
color: var(--claude-text);
font-size: 22px;
font-weight: 500;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
&:hover:not(:disabled) {
color: var(--claude-accent);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
.host-workspace-title {
font-size: 14px;
font-weight: 600;
color: var(--claude-text);
text-align: center;
}
.host-workspace-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.host-workspace-card {
width: 100%;
border: 1px solid var(--theme-control-border);
background: var(--theme-surface-soft);
border-radius: 10px;
padding: 10px 12px;
text-align: left;
color: var(--claude-text);
cursor: pointer;
transition: border-color 0.2s ease, transform 0.2s ease;
&:hover:not(:disabled) {
border-color: var(--claude-accent);
transform: translateY(-1px);
}
&:disabled {
cursor: default;
opacity: 0.95;
}
&.active {
border-color: var(--claude-accent);
background: var(--claude-highlight);
}
}
.host-workspace-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.host-workspace-label {
font-size: 13px;
font-weight: 600;
color: var(--claude-text);
}
.host-workspace-badges {
display: inline-flex;
align-items: center;
gap: 6px;
}
.host-workspace-badge {
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
line-height: 1.2;
border: 1px solid var(--theme-control-border);
color: var(--claude-text-secondary);
background: var(--theme-surface-muted);
&.default {
color: var(--claude-deep-strong);
border-color: rgba(208, 122, 20, 0.35);
background: rgba(242, 169, 59, 0.14);
}
&.current {
color: #2f6f4e;
border-color: rgba(47, 111, 78, 0.35);
background: rgba(118, 176, 134, 0.18);
}
}
[data-theme="dark"] .host-workspace-header-box {
background: rgba(30, 30, 30, 0.78);
border-color: rgba(160, 160, 160, 0.45);
}
[data-theme="dark"] .host-workspace-card {
&.active {
background: rgba(255, 255, 255, 0.08);
}
}
[data-theme="dark"] .host-workspace-badge {
&.default {
color: #f7c56f;
border-color: rgba(247, 197, 111, 0.35);
background: rgba(247, 197, 111, 0.16);
}
&.current {
color: #8edbb4;
border-color: rgba(142, 219, 180, 0.34);
background: rgba(16, 185, 129, 0.2);
}
}
.host-workspace-path {
font-size: 12px;
color: var(--claude-text-secondary);
word-break: break-all;
}
.host-workspace-hint {
font-size: 12px;
color: var(--claude-text-secondary);
}
.todo-task {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border: 1px solid rgba(118, 103, 84, 0.18);
border-radius: 10px;
font-size: 13px;
color: var(--claude-text);
background: rgba(255, 255, 255, 0.9);
}
.todo-task.done {
background: rgba(92, 190, 125, 0.08);
border-color: rgba(92, 190, 125, 0.3);
}
.todo-task-title {
flex: 1;
}
.todo-task-status {
font-weight: 600;
font-size: 12px;
margin-left: 12px;
}
.todo-instruction {
font-size: 12px;
color: var(--claude-text-secondary);
margin-top: 8px;
}
.file-node-wrapper {
font-size: 14px;
color: var(--claude-text);
font-family: inherit;
}
.folder-header {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: 8px;
transition: background 0.2s ease, transform 0.2s ease;
text-align: left;
font-family: inherit;
}
.folder-header:hover {
background: var(--claude-highlight);
transform: translateX(2px);
}
.folder-arrow {
width: 12px;
text-align: center;
color: var(--claude-text-secondary);
font-size: 12px;
}
.folder-icon,
.file-icon {
width: 18px;
text-align: center;
}
.folder-name,
.file-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: inherit;
}
.folder-children {
margin-left: 14px;
padding-left: 6px;
border-left: 1px dashed rgba(0, 0, 0, 0.08);
}
.folder-children .file-node-wrapper {
margin-left: 0;
}
.file-node.file-leaf {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 8px;
font-family: inherit;
}
.file-node.file-leaf:hover {
background: var(--claude-highlight);
}
.file-node .annotation {
color: var(--claude-text-secondary);
font-size: 12px;
margin-left: 8px;
}
.context-menu {
position: fixed;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
z-index: 3000;
min-width: 180px;
padding: 6px 0;
backdrop-filter: blur(8px);
}
.context-menu button {
width: 100%;
padding: 8px 18px;
background: transparent;
border: none;
text-align: left;
font-size: 13px;
color: #1f2933;
cursor: pointer;
transition: background 0.15s ease;
}
.context-menu button:hover {
background: rgba(59, 130, 246, 0.12);
}
.context-menu button:disabled {
color: #9ca3af;
cursor: not-allowed;
background: transparent;
}