From be0f0ed4d7c77564eb1dd76bed855148c5f77040 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 16 Apr 2026 02:18:41 +0800
Subject: [PATCH] =?UTF-8?q?style(agent):=20=E4=BC=98=E5=8C=96=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E9=9D=A2=E6=9D=BF=E5=8A=A8=E7=94=BB=E6=80=A7=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 backdrop-filter 以提升性能，调整遮罩透明度
- 添加 will-change 属性优化动画渲染性能
- 简化动画关键帧，移除不必要的 transform 变化
- 调整动画延迟时间，加快整体动画节奏
- 优化悬停效果，减少视觉复杂度
- 添加 contain 属性限制布局重绘范围
- 调整光晕效果尺寸和透明度，更符合设计规范
---
 .../src/components/agents/HistoryPanel.vue    | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
index ef593cc88d..e0fac5c25f 100644
--- a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
+++ b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
@@ -321,8 +321,7 @@ watch(() => props.visible, (val) => {
 .history-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.4);
-  backdrop-filter: blur(8px);
+  background: rgba(15, 23, 42, 0.5);
   z-index: 2000;
   display: flex;
   align-items: center;
@@ -344,18 +343,19 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  will-change: transform, opacity;
 }
 
 .modal-glow {
   position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
   background: radial-gradient(
-    circle at 30% 20%,
-    rgba(59, 130, 246, 0.08) 0%,
-    transparent 40%
+    ellipse at 30% 0%,
+    rgba(59, 130, 246, 0.06) 0%,
+    transparent 60%
   );
   pointer-events: none;
 }
@@ -442,7 +442,8 @@ watch(() => props.visible, (val) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
 
   &:hover {
     background: var(--color-error-100);
@@ -511,6 +512,7 @@ watch(() => props.visible, (val) => {
   inset: 0;
   border-radius: 50%;
   border: 2px solid var(--color-gray-200);
+  will-change: opacity;
   animation: ringPulse 3s ease-in-out infinite;
 
   &.delay-1 {
@@ -521,11 +523,9 @@ watch(() => props.visible, (val) => {
 
 @keyframes ringPulse {
   0%, 100% {
-    transform: scale(1);
     opacity: 0.5;
   }
   50% {
-    transform: scale(1.05);
     opacity: 1;
   }
 }
@@ -565,6 +565,7 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  contain: layout style;
 }
 
 .load-more {
@@ -598,8 +599,9 @@ watch(() => props.visible, (val) => {
 }
 
 .conversation-group {
-  animation: groupFadeIn 0.4s ease-out backwards;
-  animation-delay: calc(var(--group-index) * 0.1s);
+  will-change: opacity;
+  animation: groupFadeIn 0.3s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.06s);
 }
 
 @keyframes groupFadeIn {
@@ -648,6 +650,7 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  contain: layout style;
 }
 
 // ========================================
@@ -664,17 +667,15 @@ watch(() => props.visible, (val) => {
   border-radius: 14px;
   cursor: pointer;
   text-align: left;
-  transition: all 0.25s ease;
-  animation: itemFadeIn 0.3s ease-out backwards;
-  animation-delay: calc(var(--group-index) * 0.1s + var(--item-index) * 0.05s);
+  contain: content;
+  will-change: transform, opacity;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+  animation: itemFadeIn 0.25s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.06s + var(--item-index) * 0.03s);
 
   &:hover {
     border-color: var(--color-primary-300);
-    background: rgba(59, 130, 246, 0.02);
-    box-shadow:
-      0 4px 12px rgba(59, 130, 246, 0.08),
-      0 0 0 1px rgba(59, 130, 246, 0.1);
-    transform: translateY(-2px);
+    transform: translateY(-1px);
 
     .item-indicator {
       background: var(--color-primary-500);
@@ -691,11 +692,11 @@ watch(() => props.visible, (val) => {
 @keyframes itemFadeIn {
   from {
     opacity: 0;
-    transform: translateX(-8px);
+    transform: translateY(6px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateY(0);
   }
 }
 
@@ -705,7 +706,8 @@ watch(() => props.visible, (val) => {
   border-radius: 2px;
   background: var(--color-gray-200);
   flex-shrink: 0;
-  transition: all 0.25s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, background 0.2s ease;
   transform: scaleY(0.6);
 }
 
@@ -758,7 +760,8 @@ watch(() => props.visible, (val) => {
   justify-content: center;
   color: var(--color-gray-300);
   font-size: 10px;
-  transition: all 0.25s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
 // ========================================
@@ -772,11 +775,13 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  contain: layout style;
 }
 
 .timeline-item {
-  animation: msgFadeIn 0.35s ease-out backwards;
-  animation-delay: calc(var(--msg-index) * 0.08s);
+  will-change: opacity;
+  animation: msgFadeIn 0.25s ease-out backwards;
+  animation-delay: calc(var(--msg-index) * 0.04s);
 }
 
 @keyframes msgFadeIn {