From 109d9cc7791093ad4cfa74d28057f1e1208f6f18 Mon Sep 17 00:00:00 2001
From: sp mac bookpro 2605 <spmacbookpro2605@spdeMacBook-Pro.local>
Date: Mon, 25 May 2026 19:28:20 +0800
Subject: [PATCH] fix(agent): replace tailwind classes with custom css for
 avatar hover overlay

---
 src/pages/AgentEditor.tsx | 19 +++++++++++++++----
 src/styles.css            | 23 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/pages/AgentEditor.tsx b/src/pages/AgentEditor.tsx
index 80838af..4dd8630 100644
--- a/src/pages/AgentEditor.tsx
+++ b/src/pages/AgentEditor.tsx
@@ -330,10 +330,21 @@ export default function AgentEditor() {
                 >
                   <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                     <div
-                      className="rounded-full flex items-center justify-center text-2xl text-white font-bold shadow-md cursor-pointer overflow-hidden group relative"
+                      className="avatar-container"
                       style={{
                         width: 72,
                         height: 72,
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '24px',
+                        color: 'white',
+                        fontWeight: 'bold',
+                        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                        cursor: 'pointer',
+                        overflow: 'hidden',
+                        position: 'relative',
                         background: isImageUrl(agent?.avatar || selectedAvatar) ? '#f3f4f6' : agent?.avatar || selectedAvatar,
                         border: '3px solid rgba(255,255,255,0.92)',
                       }}
@@ -342,14 +353,14 @@ export default function AgentEditor() {
                       {isImageUrl(agent?.avatar || selectedAvatar) ? (
                         <img
                           src={agent?.avatar || selectedAvatar}
-                          className="w-full h-full object-cover"
+                          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                           alt="avatar"
                         />
                       ) : (
                         (agentName?.charAt(0) || '?').toUpperCase()
                       )}
-                      <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
-                        <span className="text-[10px] text-white font-medium drop-shadow-md">更换形象</span>
+                      <div className="avatar-overlay">
+                        <span className="avatar-overlay-text">更换形象</span>
                       </div>
                     </div>
                     <div style={{ minWidth: 0 }}>
diff --git a/src/styles.css b/src/styles.css
index 250d08f..d53921f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -959,3 +959,26 @@ body {
   border-color: var(--color-border);
   color: var(--color-text-secondary);
 }
+
+/* Avatar Hover Overlay */
+.avatar-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.avatar-overlay-text {
+  font-size: 10px;
+  color: white;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+}