youhua
This commit is contained in:
@@ -407,11 +407,26 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="less">
|
||||
// ============================================
|
||||
// 基础布局 - 使用设计系统变量
|
||||
// 基础布局 - 融合渐变背景
|
||||
// ============================================
|
||||
.agents-layout {
|
||||
height: 100%;
|
||||
background: var(--color-bg-page);
|
||||
// 亮色：从微妙蓝灰渐变到纯白，营造融合美感
|
||||
background: linear-gradient(180deg,
|
||||
oklch(0.97 0.012 250) 0%,
|
||||
oklch(0.98 0.006 255) 15%,
|
||||
oklch(0.995 0.002 260) 35%,
|
||||
oklch(1 0 0) 60%
|
||||
);
|
||||
|
||||
.dark & {
|
||||
// 暗色：从深蓝灰渐变到更深的统一色调
|
||||
background: linear-gradient(180deg,
|
||||
oklch(0.15 0.008 255) 0%,
|
||||
oklch(0.13 0.006 260) 20%,
|
||||
oklch(0.12 0.004 260) 50%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.agents-container {
|
||||
@@ -422,12 +437,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 头部区域 - 极简优雅
|
||||
// 头部区域 - 极简优雅，融入渐变背景
|
||||
// ============================================
|
||||
.agents-header {
|
||||
position: relative;
|
||||
padding: 48px 0 32px;
|
||||
background: linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0%, rgba(99, 102, 241, 0.14) 100%);
|
||||
background: transparent;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@@ -441,22 +456,30 @@ onMounted(() => {
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
opacity: 0.6;
|
||||
|
||||
&--1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
right: -100px;
|
||||
top: -150px;
|
||||
background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
right: -150px;
|
||||
top: -200px;
|
||||
background: radial-gradient(circle, oklch(0.55 0.12 255 / 0.06) 0%, transparent 70%);
|
||||
|
||||
.dark & {
|
||||
background: radial-gradient(circle, oklch(0.65 0.10 255 / 0.05) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left: -50px;
|
||||
bottom: -100px;
|
||||
background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
left: -100px;
|
||||
bottom: -150px;
|
||||
background: radial-gradient(circle, oklch(0.55 0.12 290 / 0.04) 0%, transparent 70%);
|
||||
|
||||
.dark & {
|
||||
background: radial-gradient(circle, oklch(0.65 0.10 290 / 0.03) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -513,12 +536,16 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-primary-500);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-md);
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 3px oklch(0.35 0.06 255 / 0.15), var(--shadow-md);
|
||||
|
||||
.dark & {
|
||||
box-shadow: 0 0 0 3px oklch(0.65 0.08 255 / 0.2), var(--shadow-md);
|
||||
}
|
||||
|
||||
& + .search-icon,
|
||||
& ~ .search-icon {
|
||||
color: var(--color-primary-500);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -559,17 +586,21 @@ onMounted(() => {
|
||||
gap: 6px;
|
||||
padding: 0 16px;
|
||||
height: 52px;
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-card);
|
||||
background: var(--card);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
&:hover {
|
||||
border-color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
border-color: var(--warning);
|
||||
background: oklch(0.95 0.08 85);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
.dark & {
|
||||
background: oklch(0.25 0.06 85);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -579,13 +610,13 @@ onMounted(() => {
|
||||
|
||||
.favorites-btn-icon {
|
||||
font-size: 18px;
|
||||
color: #f59e0b;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.favorites-btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-700);
|
||||
color: var(--foreground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -638,9 +669,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--color-gray-900);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -653,7 +684,7 @@ onMounted(() => {
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.15);
|
||||
background: oklch(0 0 0 / 0.08);
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
|
||||
@@ -669,6 +700,7 @@ onMounted(() => {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 32px 24px 48px;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -679,11 +711,11 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #E5E5E5;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #D4D4D4;
|
||||
background: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -704,8 +736,12 @@ onMounted(() => {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 48px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: oklch(1 0 0 / 0.7);
|
||||
z-index: 10;
|
||||
|
||||
.dark & {
|
||||
background: oklch(0.12 0.004 260 / 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-spinner {
|
||||
@@ -745,18 +781,24 @@ onMounted(() => {
|
||||
// ============================================
|
||||
.agent-card {
|
||||
position: relative;
|
||||
background: var(--surface-elevated);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: cardReveal 0.5s ease-out backwards;
|
||||
animation-delay: calc(var(--i) * 0.04s);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--color-gray-300);
|
||||
|
||||
.dark & {
|
||||
border-color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
opacity: 1;
|
||||
@@ -801,12 +843,12 @@ onMounted(() => {
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&--blue { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
|
||||
&--emerald { background: linear-gradient(135deg, #10B981, #06B6D4); }
|
||||
&--violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
|
||||
&--rose { background: linear-gradient(135deg, #F43F5E, #F97316); }
|
||||
&--amber { background: linear-gradient(135deg, #F59E0B, #EF4444); }
|
||||
&--cyan { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
|
||||
&--blue { background: linear-gradient(135deg, oklch(0.55 0.15 255), oklch(0.55 0.15 290)); }
|
||||
&--emerald { background: linear-gradient(135deg, oklch(0.55 0.12 160), oklch(0.50 0.10 195)); }
|
||||
&--violet { background: linear-gradient(135deg, oklch(0.55 0.15 290), oklch(0.55 0.15 340)); }
|
||||
&--rose { background: linear-gradient(135deg, oklch(0.55 0.18 10), oklch(0.55 0.15 40)); }
|
||||
&--amber { background: linear-gradient(135deg, oklch(0.70 0.14 85), oklch(0.55 0.18 25)); }
|
||||
&--cyan { background: linear-gradient(135deg, oklch(0.55 0.10 195), oklch(0.55 0.15 255)); }
|
||||
}
|
||||
|
||||
.avatar-inner {
|
||||
@@ -815,7 +857,7 @@ onMounted(() => {
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
|
||||
background: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -829,7 +871,7 @@ onMounted(() => {
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 24px;
|
||||
color: #9CA3AF;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
// 信息区域
|
||||
@@ -851,7 +893,7 @@ onMounted(() => {
|
||||
.info-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: var(--foreground);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
@@ -864,17 +906,26 @@ onMounted(() => {
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
|
||||
&--blue { background: #EFF6FF; color: #2563EB; }
|
||||
&--emerald { background: #ECFDF5; color: #059669; }
|
||||
&--violet { background: #F5F3FF; color: #7C3AED; }
|
||||
&--rose { background: #FFF1F2; color: #E11D48; }
|
||||
&--amber { background: #FFFBEB; color: #D97706; }
|
||||
&--cyan { background: #ECFEFF; color: #0891B2; }
|
||||
&--blue { background: oklch(0.93 0.03 255); color: oklch(0.45 0.12 255); }
|
||||
&--emerald { background: oklch(0.95 0.03 160); color: oklch(0.45 0.12 160); }
|
||||
&--violet { background: oklch(0.95 0.03 290); color: oklch(0.45 0.12 290); }
|
||||
&--rose { background: oklch(0.95 0.03 10); color: oklch(0.45 0.12 10); }
|
||||
&--amber { background: oklch(0.95 0.08 85); color: oklch(0.50 0.15 85); }
|
||||
&--cyan { background: oklch(0.95 0.03 195); color: oklch(0.45 0.10 195); }
|
||||
|
||||
.dark & {
|
||||
&--blue { background: oklch(0.25 0.04 255); color: oklch(0.75 0.10 255); }
|
||||
&--emerald { background: oklch(0.25 0.04 160); color: oklch(0.75 0.10 160); }
|
||||
&--violet { background: oklch(0.25 0.04 290); color: oklch(0.75 0.10 290); }
|
||||
&--rose { background: oklch(0.25 0.04 10); color: oklch(0.75 0.10 10); }
|
||||
&--amber { background: oklch(0.25 0.06 85); color: oklch(0.80 0.12 85); }
|
||||
&--cyan { background: oklch(0.25 0.04 195); color: oklch(0.75 0.08 195); }
|
||||
}
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
color: var(--muted-foreground);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
@@ -890,8 +941,8 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #F3F4F6;
|
||||
background: #FAFAFA;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--muted);
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transition: all 0.25s ease;
|
||||
@@ -908,19 +959,19 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 12px;
|
||||
background: white;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #D1D5DB;
|
||||
background: #F9FAFB;
|
||||
color: #374151;
|
||||
border-color: var(--color-gray-400);
|
||||
background: var(--accent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -928,14 +979,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: #111827;
|
||||
border-color: #111827;
|
||||
color: white;
|
||||
background: var(--foreground);
|
||||
border-color: var(--foreground);
|
||||
color: var(--background);
|
||||
|
||||
&:hover {
|
||||
background: #1F2937;
|
||||
border-color: #1F2937;
|
||||
color: white;
|
||||
background: var(--color-gray-700);
|
||||
border-color: var(--color-gray-700);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -952,13 +1003,13 @@ onMounted(() => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: var(--card);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-gray-400);
|
||||
color: var(--muted-foreground);
|
||||
font-size: 16px;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
@@ -966,10 +1017,10 @@ onMounted(() => {
|
||||
transform: scale(0.8);
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: #F59E0B;
|
||||
background: var(--accent);
|
||||
color: var(--warning);
|
||||
transform: scale(1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -980,12 +1031,16 @@ onMounted(() => {
|
||||
&--active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
color: #F59E0B;
|
||||
background: #FEF3C7;
|
||||
color: var(--warning);
|
||||
background: oklch(0.95 0.08 85);
|
||||
|
||||
.dark & {
|
||||
background: oklch(0.25 0.06 85);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #FDE68A;
|
||||
color: #D97706;
|
||||
background: oklch(0.90 0.10 85);
|
||||
color: oklch(0.60 0.12 85);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1100,10 +1155,10 @@ onMounted(() => {
|
||||
transform: translateX(-50%);
|
||||
width: 320px;
|
||||
max-width: calc(100vw - 48px);
|
||||
background: var(--color-bg-card);
|
||||
background: var(--card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border: 1px solid var(--border);
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1184,11 +1239,11 @@ onMounted(() => {
|
||||
|
||||
.category-panel .panel-chip--active .panel-chip-name,
|
||||
.category-panel .panel-chip--active .panel-chip-count {
|
||||
color: white;
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.category-panel .panel-chip--active .panel-chip-count {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: oklch(0 0 0 / 0.15);
|
||||
}
|
||||
|
||||
.category-panel .panel-chip-name {
|
||||
|
||||
Reference in New Issue
Block a user