sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

youhua

Browse Source
This commit is contained in:
sion
2026-03-19 23:20:50 +08:00
parent 292ddc989d
commit 9ff10e6769
1 changed files with 133 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
frontend/app/web-gold/src/views/agents/Agents.vue
View File

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