fix(workspace): 创作工作台 - 修复线上样式层级并优化 Agent、菜单与素材密度
This commit is contained in:
ddCat
@@ -1,6 +1,242 @@
|
||||
.canvas-agent-panel {
|
||||
/* Canvas theme -> material tokens. Only the floating shell blurs the canvas. */
|
||||
--agent-material-solid: color-mix(in srgb, var(--agent-ink) 3%, var(--agent-surface-base));
|
||||
--agent-material-glass: color-mix(in srgb, var(--agent-material-solid) 68%, transparent);
|
||||
--agent-material-sheen: color-mix(in srgb, var(--color-neutral-0) 8%, transparent);
|
||||
--agent-surface-soft: color-mix(in srgb, var(--agent-ink) 4%, transparent);
|
||||
--agent-surface-hover: color-mix(in srgb, var(--agent-ink) 7%, transparent);
|
||||
--agent-surface-raised: color-mix(in srgb, var(--agent-ink) 6%, var(--agent-material-solid));
|
||||
--agent-caption: color-mix(in srgb, var(--agent-ink) 62%, var(--agent-surface-base));
|
||||
--agent-radius-shell: calc(var(--radius) * 3.5);
|
||||
--agent-radius-surface: calc(var(--radius) * 2.5);
|
||||
--agent-material-shadow: 0 24px 80px var(--agent-shadow-color);
|
||||
--agent-focus-ring: color-mix(in srgb, var(--agent-accent) 65%, var(--agent-ink));
|
||||
container-type: inline-size;
|
||||
overscroll-behavior: contain;
|
||||
isolation: isolate;
|
||||
border: 0;
|
||||
border-radius: var(--agent-radius-shell);
|
||||
background: var(--agent-material-solid);
|
||||
color: var(--agent-ink);
|
||||
box-shadow: var(--agent-material-shadow);
|
||||
}
|
||||
|
||||
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.canvas-agent-panel {
|
||||
background: linear-gradient(145deg, var(--agent-material-sheen), transparent 55%), var(--agent-material-glass);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(145%);
|
||||
backdrop-filter: blur(32px) saturate(145%);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-header {
|
||||
min-height: 80px;
|
||||
padding: var(--space-4) var(--space-5) var(--space-3) var(--space-6);
|
||||
}
|
||||
|
||||
.agent-panel-title {
|
||||
font-size: var(--fs-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.agent-panel-context {
|
||||
margin-top: var(--space-1);
|
||||
color: var(--agent-caption);
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
|
||||
.agent-panel-status {
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
|
||||
.agent-header-actions .ant-btn {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.agent-conversation {
|
||||
padding: var(--space-4) var(--space-6) var(--space-6);
|
||||
scroll-padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
.agent-conversation-messages > * + * {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.agent-message-user {
|
||||
border-radius: var(--agent-radius-surface) var(--agent-radius-surface) var(--space-2) var(--agent-radius-surface);
|
||||
background: var(--agent-surface-hover, color-mix(in srgb, var(--foreground) 7%, transparent));
|
||||
}
|
||||
|
||||
.agent-welcome {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
.agent-welcome-intro {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agent-welcome-orb {
|
||||
display: inline-block;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-bottom: var(--space-5);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 32% 24%, var(--color-neutral-0), transparent 36%),
|
||||
radial-gradient(circle at 70% 80%, var(--palette-node-audio), transparent 64%),
|
||||
radial-gradient(circle at 35% 65%, color-mix(in srgb, var(--agent-accent) 65%, var(--color-neutral-0)), var(--agent-accent));
|
||||
box-shadow: inset -4px -6px 14px color-mix(in srgb, var(--agent-accent) 28%, transparent), 0 8px 32px color-mix(in srgb, var(--agent-accent) 14%, transparent);
|
||||
}
|
||||
|
||||
.agent-welcome-intro h2 {
|
||||
margin: 0;
|
||||
color: var(--agent-ink);
|
||||
font-size: var(--fs-title);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.5;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.agent-welcome-intro p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--agent-caption);
|
||||
font-size: var(--fs-caption);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.agent-welcome-actions {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.agent-welcome-actions button {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: 0;
|
||||
border-radius: var(--space-4);
|
||||
background: transparent;
|
||||
color: var(--agent-caption);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.agent-welcome-actions button:hover:not(:disabled) {
|
||||
background: var(--agent-surface-soft);
|
||||
color: var(--agent-ink);
|
||||
}
|
||||
|
||||
.agent-welcome-actions button:focus-visible {
|
||||
outline: 2px solid var(--agent-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.agent-welcome-actions button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.agent-welcome-actions svg {
|
||||
width: var(--space-5);
|
||||
height: var(--space-5);
|
||||
flex: 0 0 auto;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.agent-welcome-actions button > span {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.agent-welcome-actions strong,
|
||||
.agent-welcome-actions small {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.agent-welcome-actions strong {
|
||||
color: var(--agent-ink);
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.agent-welcome-actions small {
|
||||
margin-top: var(--space-half);
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
|
||||
.agent-welcome-actions .agent-welcome-arrow {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.agent-welcome-footnote {
|
||||
margin: var(--space-6) 0 0;
|
||||
color: var(--agent-caption);
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
|
||||
.agent-composer-wrap {
|
||||
padding: var(--space-2) var(--space-4) var(--space-4);
|
||||
}
|
||||
|
||||
.agent-composer-surface {
|
||||
padding: var(--space-4) var(--space-4) var(--space-3);
|
||||
border-radius: var(--agent-radius-surface, var(--radius-xl));
|
||||
background: var(--agent-surface-raised, var(--background));
|
||||
}
|
||||
|
||||
.agent-composer-surface:focus-within {
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-accent, var(--foreground)) 35%, transparent);
|
||||
}
|
||||
|
||||
.agent-plan-bar {
|
||||
border: 0;
|
||||
background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 4%, transparent));
|
||||
}
|
||||
|
||||
.agent-question-bar {
|
||||
border: 0;
|
||||
background: var(--agent-surface-raised, var(--background));
|
||||
}
|
||||
|
||||
@container (max-width: 400px) {
|
||||
.agent-panel-header {
|
||||
gap: var(--space-2);
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
.agent-panel-status { white-space: nowrap; }
|
||||
.agent-conversation { padding-inline: var(--space-4); }
|
||||
.agent-welcome-actions button { padding-inline: var(--space-2); }
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.canvas-agent-panel { border-end-start-radius: 0; border-end-end-radius: 0; }
|
||||
.agent-composer-wrap { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.canvas-agent-panel { background: var(--agent-material-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-welcome-actions button { transition: none; }
|
||||
}
|
||||
|
||||
/* Agent 浮窗高于普通画布层，模型菜单必须叠在对话窗之上；菜单本身与全站二级选择器同一套。 */
|
||||
@@ -172,16 +408,16 @@
|
||||
|
||||
.agent-tool-action-link {
|
||||
min-width: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
padding: 4px 7px;
|
||||
background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 3%, transparent));
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: color-mix(in srgb, currentColor 88%, transparent);
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: left;
|
||||
transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
|
||||
transition: background-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.agent-tool-action-link:not(:disabled) {
|
||||
@@ -189,7 +425,6 @@
|
||||
}
|
||||
|
||||
.agent-tool-action-link:not(:disabled):hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
@@ -412,7 +647,7 @@
|
||||
}
|
||||
|
||||
.agent-reasoning-card[open] {
|
||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 3.5%, var(--background));
|
||||
background: var(--agent-surface-soft, color-mix(in srgb, var(--agent-reasoning-accent) 3.5%, var(--background)));
|
||||
}
|
||||
|
||||
.agent-reasoning-summary {
|
||||
@@ -590,11 +825,10 @@
|
||||
.canvas-agent-approval-card {
|
||||
--agent-approval-blue: #2563eb;
|
||||
--agent-approval-blue-hover: #1d4ed8;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 13%, transparent);
|
||||
border-radius: 16px;
|
||||
background: color-mix(in srgb, var(--foreground) 4%, var(--background));
|
||||
padding: 16px;
|
||||
box-shadow: 0 10px 28px color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 0;
|
||||
border-radius: var(--agent-radius-surface, var(--radius-xl));
|
||||
background: var(--agent-surface-raised, color-mix(in srgb, var(--foreground) 4%, var(--background)));
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.canvas-agent-approval-header {
|
||||
@@ -654,7 +888,7 @@
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
padding: 9px 10px;
|
||||
|
||||
Reference in New Issue
Block a user