Skip to content

Q
qjclaw-dmg
Commit b78a75ae authored by AI-甘富林's avatar AI-甘富林
Browse files
Options

feat(ui): 更新样式系统并添加视觉元素 

- 添加启动界面和侧边栏logo样式
- 更新Tailwind配置以支持新设计需求
- 为蓝紫渐变主题奠定视觉基础
Co-Authored-By: 's avatarClaude Opus 4.7 <noreply@anthropic.com>
parent fa5f1286
Hide whitespace changes
Inline Side-by-side
Showing with 2852 additions and 696 deletions
apps/ui/src/styles.css
View file @ b78a75ae
:root {
color: #182236;
/* ===== 颜色系统设计 - 蓝紫渐变主题 ===== */
/* 主色系 - 从浅薰衣草紫到清透深空蓝 */
--color-primary-50: #F5F3FF; /* 超浅薰衣草 */
--color-primary-100: #EDE9FE; /* 浅薰衣草 */
--color-primary-200: #DDD6FE; /* 柔雾紫 */
--color-primary-300: #C4B5FD; /* 薰衣草紫 */
--color-primary-400: #A78BFA; /* 柔雾蓝紫 */
--color-primary-500: #8B5CF6; /* 主色 - 薰衣草紫 */
--color-primary-600: #7C3AED; /* 深薰衣草紫 */
--color-primary-700: #6D28D9; /* 深紫 */
--color-primary-800: #5B21B6; /* 深紫蓝 */
--color-primary-900: #4C1D95; /* 深蓝紫 */
/* 次色系 - 清透深空蓝 */
--color-secondary-50: #EFF6FF; /* 超浅蓝 */
--color-secondary-100: #DBEAFE; /* 浅蓝 */
--color-secondary-200: #BFDBFE; /* 柔雾蓝 */
--color-secondary-300: #93C5FD; /* 浅空蓝 */
--color-secondary-400: #60A5FA; /* 柔雾深空蓝 */
--color-secondary-500: #3B82F6; /* 主色 - 清透深空蓝 */
--color-secondary-600: #2563EB; /* 深空蓝 */
--color-secondary-700: #1D4ED8; /* 深蓝 */
--color-secondary-800: #1E40AF; /* 深海蓝 */
--color-secondary-900: #1E3A8A; /* 深夜蓝 */
/* 语义化颜色 */
--color-bg-primary: var(--color-primary-50); /* 主背景 */
--color-bg-secondary: var(--color-secondary-50); /* 次背景 */
--color-bg-surface: #FFFFFF; /* 表面背景 */
--color-bg-overlay: rgba(255, 255, 255, 0.92); /* 叠加层 */
--color-text-primary: #1F2937; /* 主要文本 */
--color-text-secondary: #4B5563; /* 次要文本 */
--color-text-tertiary: #6B7280; /* 辅助文本 */
--color-text-inverse: #FFFFFF; /* 反色文本 */
--color-border-light: rgba(139, 92, 246, 0.12); /* 浅边框 */
--color-border-medium: rgba(139, 92, 246, 0.2); /* 中边框 */
--color-border-strong: rgba(139, 92, 246, 0.3); /* 强边框 */
/* ===== 间距系统设计（基于8px基准） ===== */
--space-0: 0px;
--space-1: 4px; /* 超小间距 */
--space-2: 8px; /* 基准间距 */
--space-3: 12px; /* 小间距 */
--space-4: 16px; /* 中间距 */
--space-5: 24px; /* 大间距 */
--space-6: 32px; /* 超大间距 */
--space-7: 48px; /* 特大间距 */
/* ===== 圆角系统设计（基于8px基准） ===== */
--radius-none: 0px;
--radius-sm: 4px; /* 小圆角 */
--radius-md: 8px; /* 基准圆角 */
--radius-lg: 12px; /* 大圆角 */
--radius-xl: 16px; /* 特大圆角 */
--radius-2xl: 20px; /* 超大圆角 */
--radius-full: 9999px; /* 圆形 */
/* ===== 阴影系统设计（弥散微阴影） ===== */
/* 外阴影 - 蓝紫色系弥散阴影 */
--shadow-xs: 0 1px 2px rgba(139, 92, 246, 0.05);
--shadow-sm: 0 2px 4px rgba(139, 92, 246, 0.08);
--shadow-md: 0 4px 8px rgba(139, 92, 246, 0.12);
--shadow-lg: 0 8px 16px rgba(139, 92, 246, 0.16);
--shadow-xl: 0 12px 24px rgba(139, 92, 246, 0.2);
--shadow-2xl: 0 20px 40px rgba(139, 92, 246, 0.24);
/* 内阴影 */
--shadow-inner: inset 0 2px 4px rgba(139, 92, 246, 0.06);
--shadow-inner-md: inset 0 4px 8px rgba(139, 92, 246, 0.1);
/* 特殊阴影 */
--shadow-card: 0 8px 24px rgba(139, 92, 246, 0.12);
--shadow-button: 0 4px 12px rgba(139, 92, 246, 0.18);
--shadow-floating: 0 20px 40px rgba(139, 92, 246, 0.15);
/* ===== 全局基础样式 ===== */
color: var(--color-text-primary);
background:
radial-gradient(circle at top left, rgba(0, 110, 255, 0.08), transparent 30%),
radial-gradient(circle at bottom right, rgba(14, 184, 166, 0.08), transparent 26%),
#f4f7fb;
radial-gradient(circle at top left, rgba(139, 92, 246, 0.08), transparent 30%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 26%),
var(--color-bg-primary);
font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
}
......@@ -19,17 +97,24 @@ body {
button, input, textarea, select { font: inherit; }
button {
border: 0;
border-radius: 12px;
padding: 10px 14px;
background: linear-gradient(135deg, #0f7bff, #0c60d8);
color: #fff;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
color: var(--color-text-inverse);
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-button);
transition: all 0.2s ease;
}
button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
button.secondary {
background: #edf3fb;
color: #2d3955;
box-shadow: inset 0 0 0 1px #d8e1ef;
background: var(--color-bg-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-medium);
box-shadow: var(--shadow-sm);
}
button:disabled,
input:disabled,
......@@ -40,11 +125,17 @@ select:disabled {
}
input, textarea, select {
width: 100%;
border: 1px solid #d9e2ef;
border-radius: 12px;
padding: 12px 14px;
background: #fff;
color: #182236;
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-surface);
color: var(--color-text-primary);
transition: all 0.2s ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-primary-400);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
textarea {
min-height: 128px;
......@@ -55,8 +146,8 @@ textarea {
}
label {
display: grid;
gap: 8px;
color: #53637f;
gap: var(--space-2);
color: var(--color-text-tertiary);
font-size: 13px;
}
p, h1, h2, h3, strong, span { margin: 0; }
......@@ -68,19 +159,70 @@ strong { font-weight: 600; }
height: 100vh;
min-height: 100vh;
display: grid;
grid-template-columns: 208px minmax(0, 1fr);
grid-template-columns: 280px minmax(0, 1fr);
overflow: hidden;
}
.sidebar {
height: 100vh;
padding: 22px 16px;
padding: var(--space-5) var(--space-4);
display: grid;
grid-template-rows: auto auto;
align-content: start;
gap: 14px;
background: linear-gradient(180deg, #f8fbff, #edf3fa);
border-right: 1px solid #dee6f1;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--space-4);
background: linear-gradient(
180deg,
rgba(139, 92, 246, 0.08) 0%,
rgba(59, 130, 246, 0.06) 50%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(8px);
border-right: 1px solid var(--color-border-light);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1);
}
.sidebar-logo-block {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-light);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
box-shadow: var(--shadow-card);
}
.sidebar-logo-mark-shell {
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(180deg, #F5F0FF, #EBF0FF);
box-shadow: inset 0 0 0 1px rgba(109, 93, 252, 0.15);
}
.sidebar-logo-mark {
width: 32px;
height: 32px;
object-fit: contain;
display: block;
}
.sidebar-logo-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.sidebar-logo-copy strong {
font-size: 13px;
line-height: 1.2;
color: #1f2f49;
}
.brand-block,
......@@ -101,10 +243,10 @@ strong { font-weight: 600; }
.brand-kicker {
display: inline-flex;
width: fit-content;
padding: 5px 10px;
border-radius: 999px;
background: rgba(15, 123, 255, 0.1);
color: #0f7bff;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
background: rgba(59, 130, 246, 0.1);
color: var(--color-secondary-500);
font-size: 12px;
letter-spacing: 0.06em;
}
......@@ -130,21 +272,32 @@ strong { font-weight: 600; }
align-self: start;
}
.nav-item {
height: 42px;
padding: 0 12px;
border-radius: 12px;
min-height: 48px;
padding: 0 var(--space-4);
border-radius: var(--radius-lg);
text-align: left;
background: transparent;
color: #20304b;
color: var(--color-text-secondary);
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
box-shadow: none;
transition: all 0.2s ease;
}
.nav-item.active {
background: #fff;
color: #0f7bff;
box-shadow: inset 3px 0 0 #0f7bff, 0 8px 18px rgba(15, 123, 255, 0.1);
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.12),
rgba(59, 130, 246, 0.08)
);
color: var(--color-primary-500);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border-medium);
}
.nav-item:hover:not(.active) {
background: rgba(139, 92, 246, 0.05);
}
.sidebar-top,
......@@ -167,23 +320,113 @@ strong { font-weight: 600; }
}
.sidebar-bottom {
overflow: auto;
padding-right: 2px;
align-content: start;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
gap: 12px;
padding-right: 0;
}
.sidebar-expert-scroll {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
/* 透明细滚动条 */
scrollbar-width: thin;
scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
/* Webkit透明滚动条样式 */
.sidebar-expert-scroll::-webkit-scrollbar {
width: 4px;
}
.sidebar-expert-scroll::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
.sidebar-expert-scroll::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3);
border-radius: 2px;
transition: background 0.2s ease;
}
.sidebar-expert-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}
/* 会话列表细滚动条样式 - 默认隐藏，滚动时显示 */
.sidebar-session-list::-webkit-scrollbar {
width: 2px;
opacity: 0;
}
.sidebar-session-list::-webkit-scrollbar-track {
background: transparent;
border-radius: 1px;
}
.sidebar-session-list::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 1px;
transition: background 0.3s ease;
}
.sidebar-session-list:hover::-webkit-scrollbar-thumb,
.sidebar-session-list:active::-webkit-scrollbar-thumb,
.sidebar-session-list:focus::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3);
}
.sidebar-session-list::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}
.sidebar-section {
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(209, 220, 236, 0.92);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 12px 28px rgba(35, 52, 82, 0.06);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-medium);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.96),
rgba(247, 251, 250, 0.94)
);
box-shadow: var(--shadow-md);
}
.sidebar-section-fill {
min-height: 0;
}
.sidebar-experts-entry,
.sidebar-session-section {
min-height: 0;
border-radius: 22px;
}
.sidebar-experts-entry {
flex: 1 1 0;
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.sidebar-session-section {
flex: 0 0 clamp(132px, 24%, 196px); /* 原来高度的70% */
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.sidebar-session-list {
min-height: 0;
overflow: auto;
padding-right: 2px;
/* 透明细滚动条 - 默认隐藏 */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.sidebar-section-head {
display: flex;
align-items: center;
......@@ -223,24 +466,35 @@ strong { font-weight: 600; }
.expert-card {
width: 100%;
display: grid;
gap: 6px;
padding: 12px;
gap: var(--space-1);
padding: var(--space-4);
text-align: left;
border-radius: 16px;
border: 1px solid rgba(209, 220, 236, 0.9);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.94));
color: #20304b;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
color: var(--color-text-primary);
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.expert-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(35, 52, 82, 0.08);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(139, 92, 246, 0.3);
}
.expert-card.active {
border-color: rgba(15, 123, 255, 0.3);
box-shadow: 0 16px 34px rgba(15, 123, 255, 0.12);
border-color: var(--color-primary-400);
box-shadow: var(--shadow-xl);
background: linear-gradient(
180deg,
rgba(139, 92, 246, 0.06),
rgba(59, 130, 246, 0.04)
);
}
.expert-card strong,
......@@ -261,57 +515,120 @@ strong { font-weight: 600; }
.sidebar-session-list {
min-height: 0;
overflow: auto;
overflow-y: auto; /* 确保垂直滚动 */
overflow-x: hidden;
padding-right: 2px; /* 为滚动条留出空间 */
display: grid;
gap: 10px;
}
.sidebar-session-card {
/* 布局 */
min-height: 40px;
height: 60px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
padding: 8px;
border-radius: 14px;
gap: var(--space-2);
align-items: center;
/* 视觉样式 */
padding: var(--space-2);
border-radius: var(--radius-lg);
border: 1px solid transparent;
background: rgba(247, 250, 255, 0.88);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-xs);
/* 交互效果 */
transition: all 0.2s ease;
cursor: pointer;
}
.sidebar-session-card.active {
border-color: rgba(15, 123, 255, 0.18);
background: rgba(238, 245, 255, 0.96);
.sidebar-session-card:hover {
background: rgba(255, 255, 255, 0.99);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.sidebar-session-main,
.sidebar-session-close {
border: none;
background: transparent;
color: #20304b;
.sidebar-session-card.active {
border-color: rgba(139, 92, 246, 0.1);
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.04) 0%,
rgba(139, 92, 246, 0.025) 50%,
rgba(139, 92, 246, 0.01) 100%
);
box-shadow: var(--shadow-card);
}
.sidebar-session-main {
/* 布局 */
min-width: 0;
display: grid;
gap: 2px;
padding: 0;
min-height: 48px;
height: 100%; /* 填充父容器高度 */
padding: 0 12px;
/* 视觉样式 */
border: none;
background: transparent;
color: #20304b;
border-radius: 16px;
text-align: left;
align-content: center; /* 垂直居中内容 */
/* 交互效果 */
transition: all 0.15s ease;
cursor: pointer;
}
.sidebar-session-main:hover {
background: rgba(139, 92, 246, 0.04);
}
.sidebar-session-close {
/* 布局 */
width: 28px;
height: 28px;
padding: 0;
/* 视觉样式 */
border: none;
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 0 0 1px rgba(217, 224, 231, 0.94);
color: #64748b;
border-radius: 999px;
color: #7c8da8;
/* 文本样式 */
font-size: 16px;
font-weight: 500;
line-height: 1;
/* 交互效果 */
transition: all 0.15s ease;
cursor: pointer;
}
.sidebar-session-close:hover {
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2);
color: var(--color-primary-600);
}
.chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(209, 220, 236, 0.92);
background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(244, 248, 255, 0.94));
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
box-shadow: var(--shadow-sm);
}
.chat-header-copy {
......@@ -363,11 +680,16 @@ strong { font-weight: 600; }
.main-shell {
height: 100vh;
min-height: 0;
padding: 22px;
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: 14px;
gap: var(--space-4);
overflow: hidden;
background: linear-gradient(135deg,
rgba(245, 243, 255, 0.95) 0%, /* 柔雾紫 */
rgba(240, 245, 255, 0.98) 50%, /* 柔雾蓝 */
rgba(255, 255, 255, 1) 100% /* 纯白 */
);
}
.startup-overlay {
......@@ -415,39 +737,34 @@ strong { font-weight: 600; }
.startup-overlay-panel {
position: relative;
z-index: 1;
width: min(560px, 100%);
min-height: min(560px, calc(100vh - 96px));
width: min(760px, 100%);
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
justify-content: center;
gap: 0;
padding: clamp(54px, 10vh, 86px) 42px 48px;
padding: 0;
text-align: center;
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.72);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
box-shadow: 0 28px 80px rgba(53, 90, 135, 0.16);
backdrop-filter: blur(16px);
animation: startup-overlay-enter 420ms ease-out both;
}
.startup-overlay.error .startup-overlay-panel {
border-color: rgba(255, 255, 255, 0.82);
box-shadow: 0 24px 72px rgba(53, 90, 135, 0.18);
width: min(640px, 100%);
}
.startup-overlay-copy {
width: min(460px, 100%);
width: auto;
max-width: 100%;
display: grid;
justify-items: center;
gap: 16px;
margin-top: clamp(10px, 3vh, 26px);
gap: 10px;
margin-top: 0;
}
.startup-overlay-copy h1 {
margin: 0;
font-size: clamp(48px, 9vw, 78px);
font-size: clamp(56px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.06em;
font-weight: 800;
......@@ -458,6 +775,42 @@ strong { font-weight: 600; }
text-shadow: 0 18px 48px rgba(139, 182, 255, 0.18);
}
.startup-overlay-brand-line {
width: auto;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.startup-overlay-brand-copy {
min-width: 0;
display: grid;
justify-items: start;
gap: 8px;
text-align: left;
}
.startup-overlay-mark-shell {
width: 60px;
height: 60px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.startup-overlay-logo {
width: 52px;
height: 52px;
object-fit: contain;
display: block;
}
.startup-overlay-tagline {
margin: 0;
font-size: 15px;
......@@ -468,10 +821,11 @@ strong { font-weight: 600; }
}
.startup-overlay-body {
width: min(420px, 100%);
width: min(500px, 100%);
display: grid;
justify-items: center;
gap: 16px;
margin-top: clamp(34px, 8vh, 68px);
margin-top: 34px;
}
.startup-overlay-progress {
......@@ -494,6 +848,7 @@ strong { font-weight: 600; }
.startup-overlay-status {
display: grid;
gap: 8px;
justify-items: center;
}
.startup-overlay-status strong {
......@@ -616,12 +971,15 @@ strong { font-weight: 600; }
.section-head.compact { align-items: flex-start; }
.notice, .empty-state, .catalog-item { padding: 14px; }
.notice {
background: rgba(15, 123, 255, 0.08);
color: #28507f;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 250, 0.96));
border-color: rgba(214, 228, 223, 0.96);
box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
color: #355650;
flex: 0 0 auto;
}
.notice.error {
background: rgba(239, 68, 68, 0.08);
background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(255, 244, 244, 0.96));
border-color: rgba(248, 113, 113, 0.24);
color: #972f2f;
}
.toast-notice {
......@@ -669,6 +1027,20 @@ strong { font-weight: 600; }
color: #972f2f;
}
.settings-actions { justify-content: flex-start; }
.settings-input-label {
width: 100%;
display: grid;
gap: 8px;
}
.settings-input-label-text {
font-size: 12px;
font-weight: 600;
line-height: 1.5;
color: #5f738e;
}
.workspace-directory-card {
display: grid;
gap: 12px;
......@@ -781,9 +1153,9 @@ strong { font-weight: 600; }
.thinking-spinner {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(15, 123, 255, 0.18);
border-top-color: #0f7bff;
border-radius: var(--radius-full);
border: 2px solid rgba(59, 130, 246, 0.18);
border-top-color: var(--color-secondary-500);
animation: spinner-rotate 0.8s linear infinite;
}
......@@ -796,9 +1168,9 @@ strong { font-weight: 600; }
display: inline-block;
width: 8px;
height: 1.05em;
margin-left: 3px;
border-radius: 999px;
background: #0f7bff;
margin-left: var(--space-1);
border-radius: var(--radius-full);
background: var(--color-secondary-500);
vertical-align: text-bottom;
animation: cursor-blink 1s steps(1, end) infinite;
}
......@@ -993,58 +1365,345 @@ strong { font-weight: 600; }
color: inherit;
}
.composer-shell {
gap: 10px;
padding: 12px;
border-radius: 16px;
border: 1px solid #dbe5f1;
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
flex: 0 0 auto;
.nav-item-icon svg,
.expert-chip-icon svg,
.message-action-icon svg,
.composer-submit svg,
.attachment-trigger svg,
.markdown-code-copy svg {
width: 18px;
height: 18px;
}
.composer-field {
.message-bubble-assistant {
width: 100%;
max-width: 100%;
}
.message-plain-text,
.markdown-body {
margin: 0;
color: #0f172a;
font-size: 15px;
line-height: 1.82;
}
.markdown-body {
display: grid;
gap: 10px;
gap: 14px;
}
.composer-skill-badge {
justify-self: start;
min-width: 0;
max-width: 100%;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #d7e4f2;
background: #f3f8ff;
color: #1f5f9c;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.markdown-body > * {
margin: 0;
}
.composer-field textarea {
min-height: 88px;
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #10233d;
font-weight: 700;
letter-spacing: -0.02em;
}
.composer-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
.markdown-body h1 {
font-size: 28px;
line-height: 1.24;
}
.composer-left-tools {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
.markdown-body h2 {
font-size: 23px;
line-height: 1.28;
}
.composer-left-tools-expert {
min-height: 38px;
.markdown-body h3 {
font-size: 19px;
line-height: 1.34;
}
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
font-size: 16px;
line-height: 1.42;
}
.markdown-paragraph {
color: #20344d;
}
.markdown-list {
display: grid;
gap: 8px;
padding-left: 22px;
color: #20344d;
}
.markdown-list li {
padding-left: 4px;
line-height: 1.78;
}
.markdown-quote {
display: grid;
gap: 8px;
padding: 14px 16px;
border-left: 3px solid #7cb7ff;
border-radius: 0 18px 18px 0;
background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(248, 251, 255, 0.94));
color: #35506f;
}
.markdown-rule {
border: 0;
border-top: 1px solid rgba(200, 214, 232, 0.92);
margin: 4px 0;
}
.markdown-inline-code {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
background: #eef4fb;
color: #11407e;
font-size: 0.92em;
line-height: 1.6;
}
.markdown-link {
color: #0f67de;
text-decoration: none;
border-bottom: 1px solid rgba(15, 103, 222, 0.22);
}
.markdown-link:hover {
color: #0c58bf;
border-bottom-color: rgba(12, 88, 191, 0.38);
}
.markdown-code-block {
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(209, 220, 236, 0.92);
background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.markdown-code-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(219, 228, 239, 0.96);
background: rgba(255, 255, 255, 0.82);
color: #5e738f;
font-size: 12px;
font-weight: 600;
}
.markdown-code-copy {
width: 30px;
height: 30px;
padding: 0;
border-radius: 10px;
background: #edf3fb;
color: #4b6484;
box-shadow: inset 0 0 0 1px #d8e1ef;
}
.markdown-code-copy.copied {
background: #ecfdf3;
color: #169b58;
box-shadow: inset 0 0 0 1px rgba(22, 155, 88, 0.16);
}
.markdown-code-pre {
margin: 0;
padding: 16px 18px 18px;
overflow: auto;
color: #18314e;
font-size: 13px;
line-height: 1.75;
}
.message-card-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
justify-content: flex-start;
opacity: 0;
transition: opacity 150ms ease;
}
.message-card:hover .message-card-actions {
opacity: 1;
}
.message-action-icon {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #5f7773;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}
.message-action-icon:hover {
background: #f4fbfa;
}
.message-action-icon.copied {
background: #ecfdf3;
color: #16a34a;
}
.composer-shell {
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
flex: 0 0 auto;
box-shadow: var(--shadow-sm);
}
.composer-field {
display: grid;
gap: 10px;
}
.composer-shell.dragging {
border-color: rgba(139, 92, 246, 0.36);
background: var(--color-primary-50);
}
.composer-skill-badge {
justify-self: start;
min-width: 0;
max-width: 100%;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #d7e4f2;
background: #f3f8ff;
color: #1f5f9c;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.composer-field textarea {
min-height: 88px;
}
.composer-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.composer-left-tools {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.attachment-trigger {
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: #f1f8f6;
color: #466560;
box-shadow: inset 0 0 0 1px rgba(214, 228, 223, 0.96);
}
.attachment-trigger.icon-only {
width: 38px;
min-width: 38px;
padding: 0;
color: var(--ui-color-primary-strong);
background: #edf8f6;
box-shadow: inset 0 0 0 1px rgba(191, 216, 209, 0.96);
}
.composer-attachment-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.composer-attachment-chip {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(191, 216, 209, 0.96);
background: #edf8f6;
color: #1f2f49;
}
.composer-attachment-chip-label {
font-size: 13px;
line-height: 1.4;
}
.composer-attachment-remove {
min-width: 24px;
width: 24px;
height: 24px;
padding: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: #5f7773;
box-shadow: inset 0 0 0 1px rgba(214, 228, 223, 0.96);
}
.composer-drop-indicator {
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed rgba(109, 93, 252, 0.42);
border-radius: 18px;
background: #F0F7FF;
color: var(--ui-color-primary-strong);
font-size: 13px;
font-weight: 600;
}
.composer-submit {
display: inline-flex;
align-items: center;
justify-content: center;
}
.composer-submit-spinner {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.32);
border-top-color: #ffffff;
animation: spinner-rotate 0.8s linear infinite;
}
.composer-left-tools-expert {
min-height: 38px;
}
.composer-mode-label {
......@@ -1071,8 +1730,11 @@ strong { font-weight: 600; }
.skill-trigger {
width: 38px;
padding: 0;
background: rgba(255, 255, 255, 0.94);
color: #284843;
font-size: 16px;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(214, 228, 223, 0.96);
}
.skill-trigger.text-trigger {
......@@ -1084,9 +1746,9 @@ strong { font-weight: 600; }
}
.skill-chip {
background: rgba(15, 123, 255, 0.08);
border-color: rgba(15, 123, 255, 0.16);
color: #1e568d;
background: rgba(13, 148, 136, 0.1);
border-color: rgba(13, 148, 136, 0.18);
color: var(--ui-color-primary-strong);
}
.skill-menu {
......@@ -1126,8 +1788,8 @@ strong { font-weight: 600; }
}
.skill-menu-item.active {
border-color: rgba(15, 123, 255, 0.16);
background: rgba(238, 245, 255, 0.94);
border-color: rgba(13, 148, 136, 0.18);
background: rgba(237, 248, 246, 0.96);
}
.catalog-item {
......@@ -1161,10 +1823,21 @@ strong { font-weight: 600; }
font-size: 12px;
font-weight: 600;
white-space: nowrap;
background: rgba(239, 247, 245, 0.98);
color: #4f6965;
box-shadow: inset 0 0 0 1px rgba(214, 228, 223, 0.92);
}
.status-chip.positive { background: rgba(16, 185, 129, 0.12); color: #0f7f59; }
.status-chip.warning { background: rgba(245, 158, 11, 0.14); color: #b46f0a; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid rgba(13, 148, 136, 0.18);
outline-offset: 2px;
}
@keyframes notice-fade {
0%, 78% {
opacity: 1;
......@@ -1216,7 +1889,7 @@ strong { font-weight: 600; }
.sidebar {
height: auto;
border-right: 0;
border-bottom: 1px solid #dee6f1;
border-bottom: 1px solid var(--color-border-light);
}
.sidebar-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
......@@ -1229,10 +1902,14 @@ strong { font-weight: 600; }
}
@media (max-width: 720px) {
.main-shell, .sidebar { padding: 16px; }
.main-shell, .sidebar { padding: var(--space-4); }
.startup-overlay { padding: 18px; }
.startup-overlay-panel { min-height: min(500px, calc(100vh - 36px)); padding: 42px 22px 34px; border-radius: 28px; }
.startup-overlay-panel { width: 100%; }
.startup-overlay-copy { gap: 14px; margin-top: 6px; }
.startup-overlay-brand-line { flex-direction: column; gap: 14px; }
.startup-overlay-brand-copy { justify-items: center; text-align: center; }
.startup-overlay-mark-shell { width: 56px; height: 56px; }
.startup-overlay-logo { width: 48px; height: 48px; }
.startup-overlay-copy h1 { font-size: clamp(42px, 14vw, 60px); }
.startup-overlay-tagline { font-size: 13px; letter-spacing: 0.24em; }
.startup-overlay-body { width: 100%; margin-top: 28px; }
......@@ -1265,7 +1942,9 @@ strong { font-weight: 600; }
.startup-overlay-progress span,
.toast-notice,
.experts-drawer,
.button-chevron {
.button-chevron,
.settings-panel,
.model-config-card {
animation: none;
transition: none;
}
......@@ -1388,9 +2067,6 @@ strong { font-weight: 600; }
}
.sidebar {
grid-template-rows: auto minmax(0, 1fr);
}
.sidebar-bottom {
display: grid;
......@@ -1437,18 +2113,24 @@ strong { font-weight: 600; }
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border-radius: 12px;
border: 1px solid rgba(209, 220, 236, 0.9);
background: rgba(247, 250, 255, 0.9);
min-height: 56px;
padding: 12px;
border-radius: 18px;
border: 1px solid transparent;
background: #f8fbff;
color: #20304b;
text-align: left;
box-shadow: none;
}
.expert-chip.active {
border-color: rgba(15, 123, 255, 0.24);
background: rgba(238, 245, 255, 0.96);
box-shadow: inset 0 0 0 1px rgba(15, 123, 255, 0.08);
border-color: #bfdbfe;
background: #f0f7ff;
}
.expert-chip:hover:not(:disabled) {
border-color: #dbeafe;
background: #ffffff;
}
.expert-chip-copy {
......@@ -1481,10 +2163,6 @@ strong { font-weight: 600; }
gap: 8px;
}
.sidebar-session-card {
padding: 6px 8px;
border-radius: 12px;
}
.sidebar-session-main strong {
display: block;
......@@ -1539,11 +2217,11 @@ strong { font-weight: 600; }
.sidebar-experts-entry {
background:
radial-gradient(circle at top right, rgba(15, 123, 255, 0.1), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.94));
radial-gradient(circle at top right, rgba(109, 93, 252, 0.15), transparent 42%),
linear-gradient(180deg, rgba(235, 240, 255, 0.98), rgba(245, 240, 255, 0.94));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 14px 30px rgba(35, 52, 82, 0.08);
0 14px 30px rgba(109, 93, 252, 0.08);
}
.sidebar-entry-copy {
......@@ -1649,7 +2327,7 @@ strong { font-weight: 600; }
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 248, 223, 0.96), rgba(255, 242, 196, 0.88));
background: linear-gradient(135deg, rgba(255, 248, 223, 0.96), rgba(170, 164, 143, 0.88));
color: #8d6700;
font-size: 12px;
font-weight: 600;
......@@ -1998,43 +2676,48 @@ strong { font-weight: 600; }
}
:root {
color: #19304a;
color: var(--ui-color-text);
background:
radial-gradient(circle at 0% 0%, rgba(147, 202, 255, 0.24), transparent 30%),
radial-gradient(circle at 100% 100%, rgba(148, 230, 213, 0.18), transparent 26%),
linear-gradient(180deg, #f7fbff 0%, #eff5fb 100%);
radial-gradient(circle at 0% 0%, rgba(109, 93, 252, 0.12), transparent 30%),
radial-gradient(circle at 100% 100%, rgba(249, 115, 22, 0.08), transparent 24%),
linear-gradient(180deg, #F9F7FF 0%, #F5F0FF 100%);
font-family: var(--font-sans);
}
body {
background:
radial-gradient(circle at top left, rgba(133, 192, 255, 0.18), transparent 22%),
radial-gradient(circle at bottom right, rgba(155, 226, 214, 0.14), transparent 20%),
linear-gradient(180deg, #f7fbff 0%, #eef4fa 100%);
radial-gradient(circle at top left, rgba(109, 93, 252, 0.1), transparent 24%),
radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.06), transparent 22%),
linear-gradient(180deg, var(--ui-color-canvas) 0%, var(--ui-color-canvas-strong) 100%);
color: var(--ui-color-text);
}
button {
border-radius: 14px;
background: linear-gradient(135deg, #1c7cf2, #1967dc);
box-shadow: 0 14px 28px rgba(39, 95, 166, 0.16);
background: linear-gradient(135deg, var(--ui-color-primary), var(--ui-color-primary-strong));
box-shadow: 0 12px 24px rgba(13, 148, 136, 0.18);
transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}
button.secondary {
background: rgba(255, 255, 255, 0.9);
color: #28415d;
box-shadow: inset 0 0 0 1px rgba(199, 213, 230, 0.95);
background: rgba(255, 255, 255, 0.94);
color: #284843;
box-shadow: inset 0 0 0 1px var(--ui-color-border);
}
.shell {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-columns: 248px minmax(0, 1fr);
background: var(--ui-color-canvas);
}
.sidebar {
gap: 18px;
background:
linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(240, 246, 252, 0.96)),
rgba(255, 255, 255, 0.82);
box-shadow: inset -1px 0 0 rgba(213, 224, 237, 0.88);
linear-gradient(180deg, rgba(167, 139, 250, 0.15), rgba(124, 58, 237, 0.1)),
rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: inset -1px 0 0 rgba(124, 58, 237, 0.2);
}
.brand-block {
......@@ -2074,11 +2757,11 @@ button.secondary {
}
.brand-name-primary {
background-image: linear-gradient(135deg, #2c6fe8 0%, #5ba4ff 100%);
background-image: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}
.brand-name-secondary {
background-image: linear-gradient(135deg, #3ea4bf 0%, #73cfc4 100%);
background-image: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
}
.brand-divider {
......@@ -2086,8 +2769,8 @@ button.secondary {
height: 10px;
border-radius: 3px;
transform: rotate(45deg);
background: linear-gradient(135deg, rgba(77, 151, 232, 0.92), rgba(111, 204, 197, 0.78));
box-shadow: 0 8px 18px rgba(71, 138, 213, 0.16);
background: linear-gradient(135deg, rgba(13, 148, 136, 0.92), rgba(45, 212, 191, 0.78));
box-shadow: 0 8px 18px rgba(13, 148, 136, 0.14);
}
.nav-list {
......@@ -2101,9 +2784,9 @@ button.secondary {
}
.nav-item.active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.92));
color: #165fc7;
box-shadow: inset 3px 0 0 #2b7cf0, 0 12px 28px rgba(68, 119, 181, 0.12);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 248, 0.94));
color: var(--ui-color-primary-strong);
box-shadow: inset 3px 0 0 var(--ui-color-primary), 0 10px 24px rgba(13, 148, 136, 0.1);
}
.sidebar-bottom {
......@@ -2112,9 +2795,9 @@ button.secondary {
.sidebar-section {
border-radius: 22px;
border: 1px solid rgba(215, 224, 236, 0.9);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.92));
box-shadow: 0 18px 36px rgba(36, 65, 101, 0.07);
border: 1px solid rgba(217, 231, 227, 0.92);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 250, 0.94));
box-shadow: 0 18px 34px rgba(17, 24, 39, 0.06);
}
.sidebar-section.compact {
......@@ -2132,454 +2815,561 @@ button.secondary {
.sidebar-experts-entry {
background:
radial-gradient(circle at top right, rgba(90, 157, 255, 0.12), transparent 40%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.95));
radial-gradient(circle at top right, rgba(109, 93, 252, 0.12), transparent 42%),
linear-gradient(180deg, rgba(235, 240, 255, 0.98), rgba(245, 240, 255, 0.94));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 14px 30px rgba(109, 93, 252, 0.08);
}
.expert-chip-list {
/* 分类卡片网格布局 */
.expert-category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2列布局 */
gap: 10px;
padding: 4px;
}
.expert-chip {
justify-content: flex-start;
padding: 12px 14px;
/* 分类列表布局 - 垂直可展开列表 */
.expert-category-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.expert-category-item {
border-radius: 16px;
background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(243, 248, 255, 0.94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
background: linear-gradient(135deg,
rgba(235, 240, 255, 0.9),
rgba(245, 240, 255, 0.9)
);
border: 1px solid rgba(109, 93, 252, 0.15);
box-shadow: 0 4px 12px rgba(109, 93, 252, 0.08);
transition: all 0.2s ease;
position: relative;
margin-bottom: 4px;
}
.expert-chip.active {
border-color: rgba(57, 125, 226, 0.22);
background: linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(233, 243, 255, 0.96));
box-shadow: inset 0 0 0 1px rgba(77, 141, 236, 0.08), 0 14px 28px rgba(66, 116, 176, 0.1);
.expert-category-item:hover {
border-color: rgba(109, 93, 252, 0.25);
box-shadow: 0 8px 20px rgba(109, 93, 252, 0.12);
}
.expert-chip-copy {
font-size: 13px;
line-height: 1.45;
.expert-category-header {
display: flex;
align-items: center;
gap: 2px;
padding: 6px 16px;
cursor: pointer;
user-select: none;
min-height: 40px; /* 进一步缩小高度 */
}
.sidebar-session-list {
gap: 10px;
.expert-category-header:hover {
background: linear-gradient(135deg,
rgba(235, 240, 255, 0.95),
rgba(245, 240, 255, 0.95)
);
}
.sidebar-session-card {
padding: 8px 10px;
border-radius: 16px;
background: rgba(247, 250, 255, 0.92);
.expert-category-icon {
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.sidebar-session-card.active {
border-color: rgba(60, 124, 224, 0.2);
background: linear-gradient(180deg, rgba(240, 246, 255, 0.98), rgba(236, 243, 254, 0.96));
box-shadow: 0 12px 26px rgba(68, 119, 181, 0.08);
.expert-category-title {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar-session-close {
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 0 0 1px rgba(217, 225, 236, 0.92);
.expert-category-name {
font-size: 12px;
font-weight: 600;
color: #4A5568;
line-height: 1.2;
}
.main-shell {
padding: 24px 24px 22px;
gap: 16px;
.expert-category-count {
font-size: 10px;
font-weight: 500;
color: #6D5DFC;
background: rgba(109, 93, 252, 0.1);
padding: 2px 8px;
border-radius: 10px;
align-self: flex-start;
}
.page-topbar {
.expert-category-toggle {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease;
color: #6D5DFC;
}
.conversation-topbar {
min-height: 40px;
justify-content: flex-end;
.expert-category-toggle.expanded {
transform: rotate(180deg);
}
.conversation-topbar .header-actions {
width: 100%;
justify-content: flex-end;
.expert-category-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98),
rgba(245, 240, 255, 0.96)
);
border: 1px solid rgba(109, 93, 252, 0.2);
border-radius: 16px;
box-shadow:
0 22px 48px rgba(109, 93, 252, 0.12),
0 8px 20px rgba(109, 93, 252, 0.08);
margin-top: 8px;
animation: slide-down 0.2s ease-out;
overflow: hidden;
}
.conversation-new-session {
min-width: 112px;
padding: 9px 14px;
border-radius: 999px;
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.panel,
.notice,
.empty-state,
.message-bubble,
.catalog-item {
border-radius: 24px;
.expert-category-experts {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
max-height: 320px;
overflow-y: auto;
/* 透明滚动条 */
scrollbar-width: thin;
scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
.panel {
border-color: rgba(218, 226, 237, 0.9);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.92));
box-shadow: 0 24px 48px rgba(38, 67, 102, 0.08);
.expert-category-experts::-webkit-scrollbar {
width: 4px;
}
.chat-panel {
gap: 14px;
grid-template-rows: auto minmax(0, 1fr) auto;
padding: 20px;
.expert-category-experts::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
.home-microcopy {
display: inline-flex;
.expert-category-experts::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3);
border-radius: 2px;
transition: background 0.2s ease;
}
.expert-category-experts::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}
.expert-category-expert-item {
display: flex;
align-items: center;
gap: 10px;
align-self: flex-start;
min-height: 38px;
padding: 0 16px 0 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: inset 0 0 0 1px rgba(214, 224, 236, 0.94);
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(109, 93, 252, 0.1);
cursor: pointer;
transition: all 0.15s ease;
}
.home-microcopy-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 240, 233, 0.98), rgba(255, 248, 242, 0.94));
box-shadow: 0 8px 18px rgba(220, 115, 103, 0.12);
.expert-category-expert-item:hover {
background: rgba(109, 93, 252, 0.05);
border-color: rgba(109, 93, 252, 0.2);
transform: translateY(-1px);
}
.home-microcopy-icon svg {
.expert-category-expert-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-microcopy-text {
color: #4f6782;
font-size: 13px;
line-height: 1;
letter-spacing: 0.02em;
}
.home-microcopy-tag {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
background: rgba(241, 246, 254, 0.96);
color: #5a7290;
font-size: 11px;
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(220, 228, 239, 0.92);
.expert-category-expert-icon svg {
width: 100%;
height: 100%;
color: inherit !important;
fill: inherit !important;
stroke: inherit !important;
}
.empty-state {
border-style: solid;
border-color: rgba(219, 227, 238, 0.92);
background:
radial-gradient(circle at top right, rgba(107, 176, 255, 0.08), transparent 34%),
linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(245, 249, 255, 0.96));
.expert-category-expert-name {
font-size: 13px;
font-weight: 500;
color: #4A5568;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.message-list {
gap: 12px;
padding: 6px 2px 4px;
/* 分类卡片 */
.expert-category-card {
position: relative;
aspect-ratio: 1; /* 正方形 */
min-height: 0;
}
.message-card {
.expert-category-card-inner {
width: 100%;
height: 100%;
display: flex;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px;
border-radius: 16px;
background: linear-gradient(135deg,
rgba(235, 240, 255, 0.9),
rgba(245, 240, 255, 0.9)
);
border: 1px solid rgba(109, 93, 252, 0.15);
box-shadow: 0 4px 12px rgba(109, 93, 252, 0.08);
transition: all 0.2s ease;
cursor: pointer;
}
.message-card.user {
justify-content: flex-end;
.expert-category-card:hover .expert-category-card-inner {
background: linear-gradient(135deg,
rgba(235, 240, 255, 0.95),
rgba(245, 240, 255, 0.95)
);
border-color: rgba(109, 93, 252, 0.25);
box-shadow: 0 8px 20px rgba(109, 93, 252, 0.12);
transform: translateY(-2px);
}
.message-card.assistant {
justify-content: flex-start;
.expert-category-icon {
font-size: 14px;
line-height: 1;
}
.message-bubble {
width: fit-content;
max-width: min(78%, 760px);
display: grid;
gap: 8px;
padding: 14px 16px;
border: 1px solid rgba(218, 226, 237, 0.9);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.96));
box-shadow: 0 16px 36px rgba(39, 65, 99, 0.08);
.expert-category-name {
font-size: 12px;
font-weight: 600;
color: #4A5568;
text-align: center;
line-height: 1.2;
}
.message-card.user .message-bubble {
border-color: rgba(180, 211, 249, 0.9);
background: linear-gradient(180deg, rgba(233, 244, 255, 0.98), rgba(241, 248, 255, 0.96));
.expert-category-count {
font-size: 10px;
font-weight: 500;
color: #6D5DFC;
background: rgba(109, 93, 252, 0.1);
padding: 2px 6px;
border-radius: 8px;
}
.message-card.assistant .message-bubble {
border-color: rgba(212, 227, 221, 0.94);
background: linear-gradient(180deg, rgba(244, 251, 248, 0.98), rgba(250, 253, 251, 0.96));
.expert-chip-list {
gap: 10px;
}
.message-card.streaming .message-bubble {
border-color: rgba(131, 201, 181, 0.72);
.expert-chip {
justify-content: flex-start;
padding: 12px 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(245, 249, 255, 0.94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.message-card.error .message-bubble {
border-color: rgba(239, 68, 68, 0.24);
.expert-chip.active {
border-color: rgba(109, 93, 252, 0.24);
background: linear-gradient(180deg, rgba(240, 243, 255, 0.98), rgba(232, 248, 255, 0.96));
box-shadow: inset 0 0 0 1px rgba(109, 93, 252, 0.08), 0 14px 28px rgba(109, 93, 252, 0.08);
}
.message-card p {
margin: 0;
white-space: pre-wrap;
line-height: 1.76;
color: #20344d;
.expert-chip-copy {
font-size: 13px;
line-height: 1.45;
}
.thinking-indicator {
padding-top: 0;
/* 悬停弹出层 */
.expert-category-popup {
position: absolute;
top: 0;
left: calc(100% + 8px);
z-index: 9999;
width: 240px;
max-height: 320px;
display: flex;
flex-direction: column;
border-radius: 20px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98),
rgba(245, 240, 255, 0.96)
);
border: 1px solid rgba(109, 93, 252, 0.2);
box-shadow:
0 22px 48px rgba(109, 93, 252, 0.12),
0 8px 20px rgba(109, 93, 252, 0.08);
overflow: hidden;
animation: popup-fade-in 0.2s ease-out;
}
.message-trace {
margin-top: 2px;
/* 确保弹出层容器不裁剪内容 */
.expert-category-card {
position: relative;
}
.trace-inline-toggle {
color: #53759e;
.sidebar-expert-scroll,
.sidebar-section,
.sidebar-bottom {
overflow: visible !important;
}
.composer-shell {
gap: 10px;
padding: 14px;
border-radius: 26px;
border-color: rgba(217, 225, 236, 0.96);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
box-shadow: 0 18px 38px rgba(38, 67, 102, 0.08);
@keyframes popup-fade-in {
0% {
opacity: 0;
transform: translateX(-8px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.composer-field textarea {
min-height: 92px;
max-height: 180px;
.expert-category-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: 22px;
border-color: rgba(214, 223, 235, 0.96);
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(248, 251, 255, 0.98));
line-height: 1.7;
border-bottom: 1px solid rgba(109, 93, 252, 0.1);
background: linear-gradient(135deg,
rgba(235, 240, 255, 0.95),
rgba(245, 240, 255, 0.95)
);
font-size: 14px;
font-weight: 600;
color: #4A5568;
}
.composer-footer {
align-items: center;
.expert-count-badge {
font-size: 12px;
font-weight: 500;
color: #6D5DFC;
background: rgba(109, 93, 252, 0.1);
padding: 3px 8px;
border-radius: 10px;
}
.skill-trigger,
.skill-chip {
border-radius: 999px;
.expert-category-popup-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
max-height: 280px;
}
.skill-trigger {
background: rgba(241, 246, 254, 0.98);
color: #4f709b;
box-shadow: inset 0 0 0 1px rgba(216, 225, 237, 0.96);
.expert-category-popup-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border: none;
background: transparent;
color: #4A5568;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.skill-trigger.text-trigger {
background: #f3f7fc;
color: #44617f;
.expert-category-popup-item:hover {
background: rgba(109, 93, 252, 0.05);
}
.skill-chip {
background: rgba(240, 246, 255, 0.94);
color: #45678f;
.expert-popup-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.composer-submit {
min-width: 102px;
border-radius: 999px;
/* 确保弹出层中的专家图标保持彩色 */
.expert-popup-icon svg {
width: 100%;
height: 100%;
color: inherit !important;
fill: inherit !important;
stroke: inherit !important;
}
@media (max-width: 1100px) {
.shell {
grid-template-columns: 1fr;
}
.conversation-topbar .header-actions {
justify-content: flex-start;
}
.message-bubble {
max-width: min(88%, 720px);
}
.expert-popup-name {
font-size: 13px;
font-weight: 500;
color: #4A5568;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) {
.brand-title {
font-size: 24px;
}
.main-shell,
.sidebar {
padding: 16px;
}
.chat-panel {
padding: 16px;
}
.home-microcopy {
flex-wrap: wrap;
border-radius: 22px;
line-height: 1.5;
}
.sidebar-session-list {
gap: 10px;
}
.message-bubble {
max-width: 100%;
}
.composer-shell {
padding: 12px;
border-radius: 22px;
}
.sidebar-session-close {
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 0 0 1px rgba(217, 224, 231, 0.94);
font-size: 16px;
font-weight: 500;
line-height: 1;
}
.composer-field textarea {
min-height: 84px;
}
.sidebar-session-close:hover:not(:disabled) {
color: var(--ui-color-primary-strong);
background: #f1f4fb;
box-shadow: inset 0 0 0 1px rgba(159, 174, 215, 0.96);
}
.main-shell {
padding-top: 16px;
gap: 10px;
padding: 20px 22px 22px;
gap: 14px;
}
.page-topbar {
align-items: center;
min-height: 72px;
padding: 14px 18px;
border-radius: 24px;
border: 1px solid rgba(219, 227, 232, 0.96);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.96));
box-shadow: var(--ui-shadow-soft);
}
.content-area {
display: grid;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.conversation-panel {
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 12px;
padding: 16px 18px 18px;
background: #ffffff;
border-color: #dfe6ef;
box-shadow: 0 18px 38px rgba(34, 58, 87, 0.06);
.panel,
.catalog-item {
background: #fff;
}
.conversation-panel-head {
min-height: 40px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 0;
}
.conversation-panel-copy,
.conversation-panel-actions,
.conversation-panel-body {
min-width: 0;
}
.conversation-panel-copy {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1 1 auto;
.panel {
border-radius: 24px;
border-color: rgba(219, 220, 232, 0.9);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
box-shadow: var(--ui-shadow-panel);
}
.conversation-panel-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
.chat-panel {
height: 100%;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 18px;
padding: 20px 22px 22px;
overflow: hidden;
}
.conversation-panel-kicker {
.conversation-new-session {
min-height: 46px;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid #dfe6ef;
background: #fff;
color: #425a77;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
justify-content: center;
gap: 10px;
padding: 0 16px;
border-radius: 18px;
border: 1px solid rgba(191, 203, 216, 0.96);
background: #ffffff;
color: var(--ui-color-primary-strong);
box-shadow: 0 12px 28px rgba(13, 148, 136, 0.08);
}
.conversation-panel-body {
min-height: 0;
overflow: hidden;
display: grid;
background: #ffffff;
border-radius: 18px;
.conversation-new-session:hover:not(:disabled) {
border-color: rgba(13, 148, 136, 0.24);
background: #f5f5fb;
}
.conversation-new-session {
min-width: 100px;
min-height: 32px;
padding: 0 14px;
border-radius: 999px;
.conversation-new-session-plus {
font-size: 18px;
line-height: 1;
}
.panel,
.catalog-item {
background: #fff;
.sidebar-new-session {
width: 100%;
}
.home-microcopy {
min-height: 32px;
padding: 0;
background: transparent;
box-shadow: none;
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
min-height: 36px;
padding: 0 14px 0 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: inset 0 0 0 1px rgba(214, 224, 236, 0.94);
}
.home-microcopy-icon {
width: 24px;
height: 24px;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 244, 237, 0.98), rgba(255, 250, 246, 0.94));
}
.home-microcopy-icon svg {
width: 18px;
height: 18px;
}
.home-microcopy-text {
color: #4c6480;
font-size: 13px;
line-height: 1;
}
.home-microcopy-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 9px;
border-radius: 999px;
background: #f6f8fb;
color: #5f738e;
font-size: 11px;
font-weight: 600;
box-shadow: inset 0 0 0 1px #e3e9f0;
}
.message-list {
height: 100%;
min-height: 0;
padding: 0;
background: #ffffff;
}
.empty-state {
background: #ffffff;
}
.composer-shell {
margin-top: 0;
padding: 12px;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 24px rgba(34, 58, 87, 0.05);
}
.composer-field textarea {
min-height: 88px;
max-height: 180px;
background: #fbfcfe;
}
.sidebar-section-title {
font-size: 14px;
font-weight: 600;
border-radius: 24px;
border-style: solid;
border-color: rgba(216, 219, 229, 0.94);
background:
radial-gradient(circle at top right, rgba(109, 93, 252, 0.06), transparent 34%),
linear-gradient(180deg, rgba(251, 251, 253, 0.98), rgba(245, 245, 249, 0.96));
}
.sidebar-section-label {
......@@ -2592,9 +3382,6 @@ button.secondary {
color: #24374f;
}
.sidebar-session-card {
min-height: 40px;
}
.sidebar-section-copy {
gap: 0;
......@@ -2604,50 +3391,41 @@ button.secondary {
min-height: 18px;
}
.sidebar-experts-entry,
.sidebar-section.sidebar-section-fill {
background: #ffffff;
}
.message-card,
.message-card.user,
.message-card.assistant {
justify-content: flex-start;
}
.message-bubble {
border-color: #e1e7ee;
background: #ffffff;
box-shadow: 0 10px 24px rgba(34, 58, 87, 0.05);
}
.message-card.user .message-bubble {
border-color: #d5e2f5;
background: #edf4ff;
@media (max-width: 1200px) {
.shell {
grid-template-columns: 224px minmax(0, 1fr);
}
}
.message-card.assistant .message-bubble {
border-color: #d7eadf;
background: #eefaf2;
@media (max-width: 960px) {
.shell {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.conversation-panel {
padding: 14px;
.main-shell,
.sidebar {
padding: 16px;
}
.conversation-panel-head {
align-items: stretch;
flex-direction: column;
.chat-panel {
padding: 16px;
}
.conversation-panel-actions {
justify-content: flex-start;
.page-topbar {
min-height: auto;
padding: 14px 16px;
}
.conversation-new-session {
width: 100%;
}
.home-microcopy {
flex-wrap: wrap;
line-height: 1.5;
}
}
.skill-menu {
......@@ -2687,8 +3465,8 @@ button.secondary {
min-height: 42px;
padding: 10px 14px 10px 40px;
border-radius: 14px;
border: 1px solid #d5e4e7;
background: #f7fbfb;
border: 1px solid #d5d7e7;
background: #f7f8fb;
}
.skill-menu-list {
......@@ -2709,7 +3487,7 @@ button.secondary {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid transparent;
background: #fbfdfd;
background: #fbfbfd;
box-shadow: inset 0 0 0 1px rgba(230, 236, 240, 0.72);
}
......@@ -2718,13 +3496,13 @@ button.secondary {
}
.skill-menu-item.highlighted {
border-color: rgba(20, 184, 166, 0.28);
background: #f0fbfa;
border-color: rgba(109, 93, 252, 0.28);
background: #f0f2fb;
}
.skill-menu-item.active {
border-color: rgba(13, 148, 136, 0.22);
background: #edf9f8;
border-color: rgba(13, 22, 148, 0.22);
background: #edeef8;
}
.skill-menu-item:disabled {
......@@ -2772,7 +3550,7 @@ button.secondary {
.skill-tag.availability.usable {
background: rgba(13, 148, 136, 0.14);
color: #0f766e;
color: #0f2776;
}
.skill-tag.availability.limited {
......@@ -3061,17 +3839,17 @@ button.secondary {
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: #eef4fb;
color: #165fc7;
background: #eef2f8;
color: var(--ui-color-primary-strong);
font-size: 11px;
font-weight: 700;
box-shadow: inset 0 0 0 1px #d4e0ee;
box-shadow: inset 0 0 0 1px rgba(191, 205, 216, 0.96);
}
.skill-menu-item-action.active {
background: linear-gradient(135deg, #1c7cf2, #1967dc);
background: linear-gradient(135deg, var(--ui-color-primary), var(--ui-color-primary-strong));
color: #ffffff;
box-shadow: 0 8px 18px rgba(39, 95, 166, 0.16);
box-shadow: 0 8px 18px rgba(13, 148, 136, 0.18);
}
@media (max-width: 960px) {
......@@ -3124,3 +3902,1512 @@ button.secondary {
justify-self: start;
}
}
.plugin-page-topbar,
.settings-page-topbar {
padding: 4px 4px 2px;
align-items: center;
}
.plugin-page-topbar .page-copy,
.settings-page-topbar .page-copy {
gap: 6px;
}
.plugin-page-topbar h2,
.settings-page-topbar h2 {
font-size: 28px;
line-height: 1.2;
color: #1d344f;
}
.plugin-page-topbar p,
.settings-page-topbar p {
max-width: 720px;
color: #61758f;
font-size: 14px;
line-height: 1.7;
}
.plugin-page {
min-height: 0;
padding: 22px;
overflow: hidden;
border-radius: 28px;
border: 1px solid var(--ui-color-border);
background:
radial-gradient(circle at top right, rgba(20, 184, 166, 0.08), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 251, 0.96));
box-shadow: var(--ui-shadow-panel);
}
.settings-page-shell {
position: relative;
min-height: 0;
height: 100%;
padding: 8px;
overflow: hidden;
border-radius: 30px;
border: 1px solid rgba(190, 205, 255, 0.88);
background:
radial-gradient(circle at 12% 12%, rgba(94, 203, 255, 0.22), transparent 28%),
radial-gradient(circle at 88% 10%, rgba(139, 125, 255, 0.18), transparent 24%),
linear-gradient(145deg, #f7f9ff 0%, #eef4ff 52%, #f3efff 100%);
box-shadow: 0 26px 56px rgba(109, 124, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.settings-page-shell::before,
.settings-page-shell::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
filter: blur(12px);
}
.settings-page-shell::before {
width: 240px;
height: 240px;
top: -88px;
right: 11%;
background: rgba(109, 124, 255, 0.16);
}
.settings-page-shell::after {
width: 220px;
height: 220px;
left: -76px;
bottom: -84px;
background: rgba(94, 203, 255, 0.16);
}
.settings-page-shell > * {
position: relative;
z-index: 1;
}
.plugin-section-list.plugin-flat-list {
min-height: 0;
padding-right: 4px;
align-content: start;
}
.plugin-flat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
align-content: start;
}
.plugin-flat-card {
position: relative;
min-height: 196px;
padding: 20px;
gap: 14px;
border-radius: 22px;
border: 1px solid rgba(215, 216, 229, 0.96);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 246, 250, 0.96));
box-shadow: 0 18px 34px rgba(17, 24, 39, 0.06);
overflow: hidden;
isolation: isolate;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.plugin-flat-card:hover,
.plugin-flat-card.static:hover {
transform: translateY(-3px);
border-color: rgba(13, 148, 136, 0.26);
box-shadow: 0 24px 42px rgba(13, 148, 136, 0.1);
}
.plugin-card-glow {
position: absolute;
inset: auto auto -48px -30px;
width: 160px;
height: 160px;
border-radius: 999px;
background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0) 72%);
pointer-events: none;
z-index: 0;
}
.plugin-card-claw,
.plugin-card-meta,
.plugin-card-head,
.plugin-flat-card p {
position: relative;
z-index: 1;
}
.plugin-card-claw {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(180deg, #fff7f1 0%, #fffdfb 100%);
box-shadow: inset 0 0 0 1px rgba(252, 204, 175, 0.8);
}
.plugin-card-claw svg {
width: 34px;
height: 34px;
}
.plugin-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.plugin-card-group {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(13, 148, 136, 0.1);
color: var(--ui-color-primary-strong);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.plugin-flat-card .status-chip {
min-height: 28px;
padding: 0 10px;
background: rgba(239, 240, 247, 0.98);
color: #4f5369;
box-shadow: inset 0 0 0 1px rgba(214, 214, 228, 0.92);
}
.plugin-flat-card .status-chip.positive {
background: rgba(16, 185, 129, 0.12);
color: #0f7f59;
box-shadow: none;
}
.plugin-flat-card .status-chip.warning {
background: rgba(245, 158, 11, 0.14);
color: #b46f0a;
box-shadow: none;
}
.plugin-card-head strong {
display: block;
color: #1c324d;
font-size: 18px;
line-height: 1.4;
}
.plugin-flat-card p {
color: #61758f;
font-size: 13px;
line-height: 1.75;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.plugin-page .empty-state {
padding: 20px;
border-radius: 20px;
border-style: dashed;
border-color: #d6e0eb;
background: rgba(255, 255, 255, 0.86);
}
.settings-page-stack {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
height: 100%;
padding: 0;
overflow: hidden;
}
.settings-console-grid {
flex: 1 1 auto;
min-height: 0;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: minmax(164px, 0.72fr) minmax(0, 1.28fr);
grid-template-areas:
"connection diagnostics"
"models models";
overflow: hidden;
}
.settings-panel-connection {
grid-area: connection;
}
.settings-panel-diagnostics {
grid-area: diagnostics;
}
.settings-panel-models {
grid-area: models;
}
.settings-runtime-hint {
flex: 0 0 auto;
padding: 8px 12px;
border-radius: 16px;
border: 1px solid rgba(173, 192, 245, 0.75);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 248, 255, 0.72));
backdrop-filter: blur(14px);
box-shadow: 0 14px 28px rgba(109, 124, 255, 0.08);
}
.settings-panel {
min-height: 0;
padding: 8px;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(157, 180, 255, 0.45);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
box-shadow: 0 14px 30px rgba(109, 124, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
}
.settings-panel-modern {
background:
radial-gradient(circle at top right, rgba(94, 203, 255, 0.18), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 255, 0.62));
}
.settings-panel-secondary {
background:
radial-gradient(circle at top left, rgba(139, 125, 255, 0.18), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(248, 246, 255, 0.66));
}
.settings-panel-models {
background:
radial-gradient(circle at top center, rgba(109, 124, 255, 0.18), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 249, 255, 0.66));
}
.settings-section-card {
display: grid;
min-height: 0;
height: 100%;
gap: 10px;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(175, 196, 255, 0.55);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 249, 255, 0.76));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 22px rgba(94, 125, 255, 0.06);
}
.settings-section-card-compact {
grid-template-rows: auto minmax(0, 1fr) auto;
}
.settings-section-card-models {
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
}
.settings-section-headline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.settings-section-headline > div {
min-width: 0;
display: grid;
gap: 2px;
}
.settings-section-headline-minimal {
justify-content: flex-start;
gap: 0;
}
.settings-section-headline h4 {
margin: 2px 0 0;
color: #1a2e52;
font-size: 16px;
line-height: 1.3;
letter-spacing: 0.01em;
}
.settings-section-headline p {
margin-top: 4px;
color: #64779a;
font-size: 11px;
line-height: 1.5;
}
.settings-section-kicker {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(109, 124, 255, 0.14), rgba(94, 203, 255, 0.16));
color: #5166d6;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: inset 0 0 0 1px rgba(125, 143, 255, 0.16);
}
.settings-field-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-field-grid.single {
grid-template-columns: 1fr;
}
.settings-input-label {
min-width: 0;
gap: 5px;
}
.settings-input-label-text {
font-size: 10px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #60729b;
}
.settings-input-label input,
.settings-input-label textarea,
.settings-input-label select {
min-height: 38px;
padding: 9px 12px;
border-color: rgba(170, 187, 228, 0.82);
background: rgba(252, 253, 255, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.settings-input-label input:focus-visible,
.settings-input-label textarea:focus-visible,
.settings-input-label select:focus-visible {
outline: 2px solid rgba(109, 124, 255, 0.16);
outline-offset: 0;
border-color: rgba(109, 124, 255, 0.42);
box-shadow: 0 0 0 4px rgba(94, 203, 255, 0.12);
}
.model-config-grid {
display: grid;
min-height: 0;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.model-config-grid-four {
height: 100%;
overflow: auto;
padding-right: 2px;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
grid-template-rows: repeat(3, minmax(0, 1fr));
align-content: stretch;
}
.model-config-card {
display: grid;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
gap: 8px;
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(178, 194, 255, 0.62);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 255, 0.84));
box-shadow: 0 10px 22px rgba(109, 124, 255, 0.08);
overflow: hidden;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.model-config-card:hover {
transform: translateY(-1px);
border-color: rgba(109, 124, 255, 0.36);
box-shadow: 0 14px 26px rgba(109, 124, 255, 0.12);
}
.model-config-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.model-config-card-head > div {
min-width: 0;
display: grid;
gap: 3px;
}
.model-config-card-head strong {
display: block;
color: #1a2e52;
font-size: 14px;
line-height: 1.4;
}
.model-config-card-head p {
margin-top: 0;
color: #62759a;
font-size: 11px;
line-height: 1.5;
}
.model-config-card-body {
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
padding-right: 1px;
}
.model-config-card-body .settings-field-grid {
min-height: 100%;
align-content: start;
}
.model-config-card-copywriting {
grid-column: 1;
grid-row: 1;
}
.model-config-card-image {
grid-column: 1;
grid-row: 2;
}
.model-config-card-video {
grid-column: 1;
grid-row: 3;
}
.model-config-card-digital-human {
grid-column: 2;
grid-row: 1 / span 3;
}
.model-config-card-body-digital-human {
overflow: visible;
padding-right: 0;
}
.settings-field-grid-digital-human {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-panel .status-chip {
min-height: 24px;
padding: 0 9px;
background: rgba(248, 250, 255, 0.88);
color: #536587;
box-shadow: inset 0 0 0 1px rgba(181, 195, 234, 0.88);
}
.settings-panel .status-chip.positive {
background: rgba(16, 185, 129, 0.14);
color: #0f7f59;
box-shadow: none;
}
.settings-panel .status-chip.warning {
background: rgba(245, 158, 11, 0.16);
color: #b46f0a;
box-shadow: none;
}
.settings-actions {
gap: 8px;
flex-wrap: wrap;
}
.settings-actions button {
min-height: 38px;
}
.settings-page-shell .settings-primary-button {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: #ffffff;
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
}
.settings-page-shell .settings-primary-button:hover:not(:disabled) {
background: linear-gradient(135deg, #4c8dff, #2148bd);
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}
.settings-page-shell .settings-primary-button:focus-visible {
outline-color: rgba(37, 99, 235, 0.22);
}
.settings-page-shell .settings-actions button:not(.settings-primary-button):not(.secondary),
.settings-page-shell .workspace-directory-inline-actions button:not(.settings-primary-button):not(.secondary) {
background: rgba(255, 255, 255, 0.94);
color: #2b426d;
box-shadow: inset 0 0 0 1px rgba(179, 194, 228, 0.9);
}
.settings-panel .workspace-directory-card {
min-height: 0;
gap: 8px;
}
.settings-panel .workspace-directory-panel {
min-height: 0;
height: 100%;
padding: 12px 14px;
border-radius: 18px;
border-color: rgba(173, 192, 245, 0.72);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 255, 0.88) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(109, 124, 255, 0.06);
}
.settings-panel-connection .settings-section-card,
.settings-panel-diagnostics .settings-section-card {
grid-template-rows: auto minmax(0, 1fr) auto;
}
.workspace-directory-eyebrow {
font-size: 10px;
letter-spacing: 0.16em;
color: #6c7da0;
}
.workspace-directory-path {
color: #173056;
font-size: 12px;
line-height: 1.55;
word-break: break-word;
}
.workspace-directory-hint {
color: #66789a;
font-size: 11px;
line-height: 1.5;
}
.workspace-directory-draft-row,
.workspace-directory-inline-actions,
.workspace-directory-actions {
gap: 6px;
}
@media (max-width: 1180px) {
.model-config-grid-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto auto;
}
.model-config-card-copywriting {
grid-column: 1;
grid-row: 1;
}
.model-config-card-image {
grid-column: 2;
grid-row: 1;
}
.model-config-card-video {
grid-column: 1 / -1;
grid-row: 2;
}
.model-config-card-digital-human {
grid-column: 1 / -1;
grid-row: 3;
}
}
@media (max-width: 960px) {
.settings-page-shell {
height: auto;
min-height: 100%;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.settings-page-shell::before,
.settings-page-shell::after {
display: none;
}
.settings-page-stack {
height: auto;
overflow: visible;
}
.settings-console-grid {
flex: 0 0 auto;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"connection"
"diagnostics"
"models";
overflow: visible;
}
.settings-field-grid,
.model-config-grid,
.model-config-grid-four {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.model-config-card-copywriting,
.model-config-card-image,
.model-config-card-video,
.model-config-card-digital-human {
grid-column: auto;
grid-row: auto;
}
.settings-field-grid-digital-human {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.plugin-page-topbar,
.settings-page-topbar {
padding: 0;
align-items: stretch;
}
.plugin-page,
.settings-panel {
padding: 10px;
}
.plugin-flat-grid {
grid-template-columns: 1fr;
}
.plugin-flat-card,
.settings-section-card,
.model-config-card {
min-height: 0;
padding: 14px;
}
.settings-section-headline,
.model-config-card-head {
flex-direction: column;
}
.settings-panel .status-chip {
align-self: flex-start;
}
.settings-actions button,
.workspace-directory-actions button {
width: 100%;
}
}
.composer-attachment-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
pointer-events: none;
}
.plugin-page-stack {
display: grid;
min-height: 0;
align-content: start;
gap: 16px;
}
.shell {
grid-template-columns: 280px minmax(0, 1fr);
background: #f0f7ff;
}
.window-controls {
display: none;
}
.conversation-shell .conversation-sidebar-layout {
grid-template-rows: auto minmax(0, 1fr);
gap: 16px;
}
.conversation-shell .sidebar-top {
gap: 14px;
}
.conversation-sidebar-action {
display: grid;
flex: 0 0 auto;
}
.conversation-sidebar-action .conversation-new-session {
width: 100%;
min-height: 46px;
justify-content: flex-start;
padding: 0 16px;
border-radius: 16px;
}
.conversation-shell .sidebar-bottom {
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
gap: 12px;
padding-right: 0;
}
.conversation-shell .sidebar-experts-entry,
.conversation-shell .sidebar-session-section {
flex: 1 1 0;
min-height: 0;
padding: 14px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 250, 0.96));
box-shadow: 0 18px 34px rgba(17, 24, 39, 0.06);
}
.conversation-shell .sidebar-experts-entry {
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.conversation-shell .sidebar-section-fill {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.conversation-shell .sidebar-expert-scroll {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
/* 继承自定义滚动条样式 */
}
.conversation-shell .sidebar-session-list {
min-height: 0;
overflow: auto;
padding-right: 2px;
}
.conversation-shell .conversation-main-layout,
.conversation-shell .conversation-content-area {
min-height: 0;
}
.conversation-shell .conversation-content-area {
height: 100%;
}
.conversation-shell .conversation-panel {
height: 100%;
min-height: 0;
gap: 16px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.conversation-shell .conversation-panel-head {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 2px;
}
.conversation-shell .conversation-panel-copy {
display: flex;
align-items: flex-start;
flex: 1 1 auto;
}
.conversation-shell .conversation-panel-copy,
.conversation-shell .conversation-panel-actions,
.conversation-shell .conversation-panel-body {
min-width: 0;
}
.conversation-shell .conversation-panel-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
flex: 0 0 auto;
}
.conversation-shell .conversation-panel-kicker {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--ui-color-border);
background: rgba(255, 255, 255, 0.92);
color: #496560;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
.conversation-shell .conversation-workspace {
min-height: 0;
height: 100%; /* 确保占用父容器全部高度 */
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px 24px 22px;
border-radius: 28px;
border: 1px solid rgba(141, 156, 255, 0.1); /* 浅紫色边框 */
background:
radial-gradient(circle at top right, rgba(109, 93, 252, 0.08), transparent 28%), /* 蓝紫色渐变 */
linear-gradient(180deg, rgba(240, 245, 255, 0.98), rgba(245, 240, 255, 0.96)); /* 浅蓝紫色渐变 */
box-shadow: var(--ui-shadow-panel);
overflow: hidden;
}
.conversation-shell .conversation-panel-body {
min-height: 0;
flex: 1 1 auto; /* 占用可用空间 */
display: grid;
grid-template-rows: minmax(0, 1fr);
overflow: hidden;
align-content: stretch;
}
.conversation-shell .message-list {
min-height: 0;
height: 100%;
overflow: auto;
gap: 20px;
padding: 8px 4px 8px 0;
align-content: start;
background: transparent;
}
.conversation-shell .message-card {
width: 100%;
display: flex;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.conversation-shell .message-card.user {
width: 100%;
justify-content: flex-end;
}
.conversation-shell .message-card.assistant {
justify-content: flex-start;
}
.conversation-shell .message-bubble {
width: auto;
display: grid;
gap: var(--space-3);
max-width: min(72%, 760px);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-light);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
box-shadow: var(--shadow-md);
}
.conversation-shell .message-bubble-user {
margin-left: auto;
}
.conversation-shell .message-bubble-assistant {
width: auto;
max-width: min(100%, 880px);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.conversation-shell .message-card.assistant .markdown-body {
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border-light);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.99),
rgba(248, 251, 250, 0.97)
);
box-shadow: var(--shadow-lg);
}
.conversation-shell .message-card.user .message-plain-text,
.conversation-shell .message-card.user p {
margin: 0;
white-space: pre-wrap;
color: var(--color-text-primary);
font-size: 15px;
line-height: 1.82;
}
.conversation-shell .message-card.assistant .thinking-indicator,
.conversation-shell .message-card.assistant .generation-status-card,
.conversation-shell .message-card.assistant .message-trace {
max-width: min(100%, 880px);
}
.conversation-shell .message-card.assistant .generation-status-card {
border-radius: 22px;
}
.conversation-shell .message-card-actions {
margin-top: 10px;
justify-content: flex-start;
}
.conversation-shell .composer-shell {
position: relative;
gap: 0;
padding: 14px 0 0;
margin-top: auto; /* 在 Grid 中自动占用顶部空间，推到底部 */
border: 0;
background: linear-gradient(180deg,
rgba(235, 240, 255, 0.7), /* 浅蓝色 */
rgba(235, 240, 255, 0) 18px /* 透明渐变 */
);
box-shadow: none;
border-top: 1px solid rgba(141, 156, 255, 0.1); /* 浅紫色边框 */
}
.conversation-shell .composer-surface {
display: grid;
gap: 12px;
padding: 14px 16px 12px;
border-radius: 24px;
border: 1px solid rgba(141, 156, 255, 0.15); /* 浅紫色边框 */
background: linear-gradient(135deg,
rgba(240, 245, 255, 0.98), /* 浅蓝色 */
rgba(245, 240, 255, 0.96) /* 浅紫色 */
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 8px 18px rgba(109, 93, 252, 0.06); /* 蓝紫色阴影 */
}
.conversation-shell .composer-surface:focus-within {
border-color: rgba(109, 93, 252, 0.25); /* 蓝紫色 */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 0 0 3px rgba(109, 93, 252, 0.1),
0 10px 22px rgba(109, 93, 252, 0.08);
}
.conversation-shell .composer-field {
gap: 0;
}
.conversation-shell .composer-field textarea,
.conversation-shell .composer-textarea {
min-height: 72px;
max-height: 188px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
resize: none;
box-shadow: none;
color: #0f172a;
font-size: 15px;
line-height: 1.8;
}
.conversation-shell .composer-field textarea::placeholder,
.conversation-shell .composer-textarea::placeholder {
color: #8f9fbe;
}
.conversation-shell .composer-field textarea:focus,
.conversation-shell .composer-textarea:focus {
outline: none;
}
.conversation-shell .composer-attachment-strip {
padding-top: 2px;
}
.conversation-shell .composer-attachment-chip {
min-height: 34px;
background: linear-gradient(180deg, rgba(243, 247, 255, 0.98), rgba(233, 240, 255, 0.94));
border-color: rgba(124, 107, 255, 0.16);
color: #304260;
}
.conversation-shell .composer-attachment-remove {
background: rgba(255, 255, 255, 0.92);
color: #63728d;
box-shadow: 0 2px 6px rgba(109, 93, 252, 0.1); /* 外部阴影代替内部实线 */
}
.conversation-shell .attachment-trigger.icon-only,
.conversation-shell .skill-trigger,
.conversation-shell .skill-chip {
min-height: 40px;
border-radius: 12px; /* 改为小圆角，科技感方形 */
background: linear-gradient(135deg,
rgba(240, 245, 255, 0.9), /* 浅蓝色 */
rgba(245, 240, 255, 0.9) /* 浅紫色 */
);
color: #6d5dfc; /* 蓝紫色文字 */
box-shadow: 0 2px 6px rgba(109, 93, 252, 0.1); /* 外部阴影代替内部实线 */
transition:
background 160ms ease,
color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}
.conversation-shell .attachment-trigger.icon-only {
width: 40px;
min-width: 40px;
padding: 0;
}
.conversation-shell .skill-trigger {
width: 40px;
min-width: 40px;
padding: 0;
}
.conversation-shell .skill-chip {
max-width: min(100%, 240px);
padding: 0 14px;
}
.conversation-shell .attachment-trigger.icon-only:hover:not(:disabled),
.conversation-shell .skill-trigger:hover:not(:disabled),
.conversation-shell .skill-chip:hover:not(:disabled),
.conversation-shell .composer-attachment-remove:hover:not(:disabled) {
background: linear-gradient(135deg,
rgba(230, 237, 255, 0.95), /* 浅蓝色 */
rgba(235, 230, 255, 0.95) /* 浅紫色 */
);
color: #6d5dfc; /* 蓝紫色文字 */
box-shadow: 0 4px 12px rgba(109, 93, 252, 0.15); /* 更大的外部阴影 */
}
.conversation-shell .attachment-trigger.icon-only:focus-visible,
.conversation-shell .skill-trigger:focus-visible,
.conversation-shell .skill-chip:focus-visible,
.conversation-shell .composer-attachment-remove:focus-visible,
.conversation-shell .composer-submit:focus-visible {
outline: 2px solid rgba(109, 93, 252, 0.22); /* 蓝紫色 */
outline-offset: 0;
}
.conversation-shell .attachment-trigger.icon-only:disabled,
.conversation-shell .skill-trigger:disabled {
background: rgba(243, 246, 255, 0.78);
color: rgba(99, 114, 141, 0.5);
box-shadow: 0 1px 3px rgba(109, 93, 252, 0.1); /* 外部阴影代替内部实线 */
}
.conversation-shell .composer-footer {
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: none; /* 移除实线 */
/* 使用渐变分隔线 */
background: linear-gradient(to top,
rgba(124, 107, 255, 0.05) 0%,
transparent 4px
);
}
.conversation-shell .composer-left-tools {
flex: 1 1 auto;
flex-wrap: wrap;
min-width: 0;
gap: 8px;
}
.conversation-shell .composer-submit {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border-radius: 999px;
flex: 0 0 auto;
background: linear-gradient(135deg, #6d5dfc, #8b7dff); /* 蓝紫色渐变 */
color: #ffffff;
font-size: 0; /* 确保没有文字显示 */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 12px 24px rgba(109, 93, 252, 0.24); /* 蓝紫色阴影 */
transition:
background 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}
.conversation-shell .composer-submit:hover:not(:disabled) {
background: linear-gradient(135deg, #7d6dff, #9b8dff); /* 亮蓝紫色渐变 */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 14px 28px rgba(109, 93, 252, 0.28); /* 蓝紫色阴影 */
}
.conversation-shell .composer-submit:disabled {
background: linear-gradient(135deg, #b2c8ff, #c2c9ff); /* 保持浅蓝色 */
color: rgba(255, 255, 255, 0.92);
box-shadow: none;
}
.conversation-shell .composer-submit svg {
width: 16px;
height: 16px;
}
.conversation-shell .composer-hint {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: #8392af;
}
.conversation-shell .empty-state {
padding: 28px;
border-radius: 24px;
border: 1px dashed var(--ui-color-border-strong);
background:
radial-gradient(circle at top right, rgba(20, 184, 166, 0.08), transparent 34%),
#ffffff;
}
.conversation-shell.conversation-shell-experts .conversation-panel-body > .message-list,
.conversation-shell.conversation-shell-experts .conversation-panel-body > .empty-state {
min-height: 0;
height: 100%;
}
.conversation-shell.conversation-shell-experts .expert-empty-state {
min-height: 100%;
align-content: center;
padding: 32px;
}
@media (max-width: 960px) {
.conversation-shell .conversation-workspace {
padding: 18px;
}
.conversation-shell .message-bubble,
.conversation-shell .message-bubble-assistant,
.conversation-shell .message-card.assistant .message-bubble {
max-width: 100%;
}
}
@media (max-width: 720px) {
.conversation-shell .conversation-panel-head {
align-items: stretch;
flex-direction: column;
}
.conversation-shell .conversation-panel-actions {
justify-content: flex-start;
}
.conversation-shell .conversation-panel,
.conversation-shell .conversation-workspace,
.conversation-shell .composer-surface,
.conversation-shell .empty-state {
border-radius: 22px;
}
.conversation-shell .conversation-workspace {
padding: 16px;
}
.conversation-shell .message-list {
gap: 16px;
padding-right: 0;
}
.conversation-shell .composer-footer {
align-items: flex-end;
flex-direction: row;
}
.conversation-shell .composer-left-tools {
width: auto;
flex: 1 1 auto;
}
.conversation-shell .composer-submit {
width: 44px;
min-width: 44px;
}
.conversation-shell.conversation-shell-experts .expert-empty-state {
padding: 24px;
}
}
/* 知识库页面样式 */
.knowledge-page-stack {
height: 100%;
display: flex;
flex-direction: column;
}
.knowledge-panel {
flex: 1;
display: flex;
flex-direction: column;
padding: 32px 40px;
gap: 32px;
}
.knowledge-header {
text-align: center;
margin-bottom: 16px;
}
.knowledge-title {
font-size: 32px;
font-weight: 700;
margin: 0 0 8px 0;
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.knowledge-subtitle {
font-size: 16px;
color: #94A3B8;
margin: 0;
}
.knowledge-upload-section {
display: flex;
justify-content: center;
margin: 32px 0;
}
.upload-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px dashed rgba(124, 58, 237, 0.3);
border-radius: 24px;
padding: 48px 64px;
text-align: center;
max-width: 500px;
width: 100%;
transition: all 0.3s ease;
}
.upload-card:hover {
border-color: rgba(124, 58, 237, 0.6);
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
}
.upload-icon {
margin-bottom: 24px;
}
.upload-icon svg {
stroke: #A78BFA;
}
.upload-title {
font-size: 24px;
font-weight: 600;
margin: 0 0 12px 0;
color: #E2E8F0;
}
.upload-desc {
font-size: 14px;
color: #94A3B8;
margin: 0 0 24px 0;
}
.upload-button {
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
color: white;
border: none;
border-radius: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 16px;
}
.upload-button:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}
.upload-hint {
font-size: 12px;
color: #64748B;
margin: 0;
}
.knowledge-list-section {
margin-top: 48px;
}
.section-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 24px 0;
color: #E2E8F0;
}
.document-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.document-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(124, 58, 237, 0.2);
border-radius: 16px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
cursor: pointer;
}
.document-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(124, 58, 237, 0.4);
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(124, 58, 237, 0.15);
}
.document-icon {
font-size: 32px;
}
.document-info h4 {
font-size: 16px;
font-weight: 600;
margin: 0 0 4px 0;
color: #E2E8F0;
}
.document-info p {
font-size: 12px;
color: #94A3B8;
margin: 0;
}
/* 毛玻璃效果类 */
.glass-panel {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.glass-card {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(124, 58, 237, 0.2);
border-radius: 12px;
transition: all 200ms ease;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(124, 58, 237, 0.4);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}
/* 导航栏样式更新 */
.nav-item {
transition: all 200ms ease;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.nav-item:hover {
background: rgba(124, 58, 237, 0.1);
}
.nav-item.active {
background: rgba(124, 58, 237, 0.15);
border-left: 3px solid var(--ui-color-primary);
}
.nav-item.active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ui-color-primary), transparent);
}
/* 标题字体应用 */
h1, h2, h3, h4, h5, h6,
.knowledge-title,
.section-title,
.upload-title {
font-family: var(--font-heading);
font-weight: 600;
}
apps/ui/src/tailwind.css
View file @ b78a75ae
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
@import "tailwindcss";
@theme {
--font-sans: "Inter", "PingFang SC", "Microsoft YaHei UI", sans-serif;
--font-sans: "Exo 2", "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei UI", "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
--font-heading: "Orbitron", "Exo 2", sans-serif;
}
@layer base {
:root {
--conversation-content-max-width: 900px;
--ui-color-primary: #7C3AED;
--ui-color-primary-strong: #6D28D9;
--ui-color-primary-soft: #A78BFA;
--ui-color-accent: #06B6D4;
--ui-color-canvas: #0F0F23;
--ui-color-canvas-strong: #1a0b2e;
--ui-color-surface: rgba(255, 255, 255, 0.08);
--ui-color-surface-muted: rgba(255, 255, 255, 0.05);
--ui-color-border: rgba(124, 58, 237, 0.2);
--ui-color-border-strong: rgba(124, 58, 237, 0.4);
--ui-color-text: #E2E8F0;
--ui-color-text-muted: #94A3B8;
--ui-shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.3);
--ui-shadow-panel: 0 22px 48px rgba(0, 0, 0, 0.4);
}
html,
......@@ -20,8 +35,8 @@
body {
margin: 0;
font-family: var(--font-sans);
background: #f0f7ff;
color: #0f172a;
background: linear-gradient(135deg, #0F0F23 0%, #1a0b2e 100%);
color: var(--ui-color-text);
}
}
......@@ -56,10 +71,6 @@
}
@layer components {
.sidebar-logo-block .sidebar-logo-copy strong {
@apply text-[18px] font-semibold tracking-[0.02em] text-slate-900;
}
.nav-item-icon svg,
.expert-chip-icon svg,
.message-action-icon svg,
......@@ -70,73 +81,11 @@
height: 18px;
}
.conversation-panel-copy {
@apply w-full min-w-0 max-w-none;
}
.conversation-content-width {
width: min(100%, var(--conversation-content-max-width));
margin-inline: auto;
}
.conversation-panel-head-layout {
grid-template-columns: minmax(0, var(--conversation-content-max-width)) minmax(72px, 1fr) auto;
}
.home-microcopy,
.expert-hero-kicker {
-webkit-app-region: no-drag;
@apply flex min-h-14 items-center gap-3 rounded-[20px] border border-[#dbeafe] bg-white/85 px-5 py-3 shadow-[0_18px_40px_rgba(148,163,184,0.08)];
}
.home-microcopy-icon,
.expert-hero-icon {
@apply flex h-11 w-11 items-center justify-center rounded-full bg-[#f0f7ff] text-[#2563eb] shadow-[inset_0_0_0_1px_rgba(191,219,254,0.95)];
}
.home-microcopy-text {
@apply flex-1 text-[15px] font-medium text-slate-900;
}
.home-microcopy-tag {
@apply rounded-full bg-[#f8fbff] px-3 py-1.5 text-[12px] text-slate-500 shadow-[inset_0_0_0_1px_rgba(219,234,254,0.9)];
}
.expert-hero-copy {
@apply flex min-w-0 flex-col;
}
.expert-hero-label {
@apply text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400;
}
.expert-hero-copy strong {
@apply truncate text-[18px] font-semibold text-slate-900;
}
.message-list {
@apply w-full;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}
.message-card {
@apply w-full max-w-full min-w-0;
}
.message-bubble {
@apply min-w-0 max-w-full;
}
.message-card.user .message-bubble {
width: fit-content;
max-width: min(82%, 720px);
}
.message-card.assistant .message-bubble {
@apply w-full max-w-full;
}
.message-list::-webkit-scrollbar,
.markdown-code-pre::-webkit-scrollbar {
width: 10px;
......@@ -156,14 +105,6 @@
@apply mb-0;
}
.message-card.assistant .message-bubble {
@apply relative;
}
.message-card.user .message-plain-text {
@apply whitespace-pre-wrap;
}
.message-card.assistant .message-card-actions {
@apply pointer-events-none;
}
......@@ -172,10 +113,6 @@
@apply pointer-events-auto;
}
.message-action-icon {
-webkit-app-region: no-drag;
}
.markdown-inline-code,
.markdown-code-pre,
.markdown-code-pre code {
......@@ -190,75 +127,7 @@
@apply min-h-11 px-4 text-[11px] tracking-[0.18em];
}
.markdown-code-copy {
-webkit-app-region: no-drag;
}
.markdown-code-copy.copied {
@apply bg-emerald-500/20 text-emerald-200;
}
.composer-shell {
@apply w-full;
}
.composer-field textarea {
min-height: 60px;
max-height: 126px;
}
.composer-left-tools {
align-items: center;
gap: 4px !important;
}
.composer-tool-button,
.attachment-trigger.icon-only,
.skill-trigger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.attachment-trigger.icon-only svg {
width: 18px;
height: 18px;
}
.skill-trigger {
font-size: 20px;
line-height: 1;
}
.composer-attachment-remove,
.skill-chip,
.skill-menu,
.skill-menu-item,
.sidebar-session-close,
.sidebar-session-menu,
.sidebar-session-menu-item {
-webkit-app-region: no-drag;
}
@media (max-width: 960px) {
.conversation-panel-head-layout {
grid-template-columns: minmax(0, 1fr);
}
.conversation-panel-head-layout .conversation-drag-strip {
display: none;
}
.conversation-panel-head-layout .conversation-panel-actions {
justify-content: flex-start;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment