From c25c9b11715a58484f6355bb3162c3c76902215b Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 10 四月 2025 11:23:54 +0800
Subject: [PATCH] 聊天页面优化
---
src/app/ai-scene/chat/page.tsx | 27 ++++++++++++++++-----------
1 files changed, 16 insertions(+), 11 deletions(-)
diff --git a/src/app/ai-scene/chat/page.tsx b/src/app/ai-scene/chat/page.tsx
index b0b9297..abe1219 100644
--- a/src/app/ai-scene/chat/page.tsx
+++ b/src/app/ai-scene/chat/page.tsx
@@ -80,7 +80,7 @@
{/* 鏂板鍦烘櫙鎸夐挳 */}
<button
onClick={handleAddNewScene}
- className="w-full p-3 bg-[#EEF3FD] text-[#4080FF] rounded-lg font-medium transition-all duration-300 flex items-center hover:bg-[#E1E9FA] group"
+ className="w-full p-3 bg-[#EEF3FD] text-[#4080FF] rounded-lg font-medium transition-all duration-300 flex items-center hover:bg-[#E1E9FA] group cursor-pointer"
>
<svg
className="w-5 h-5 mr-2"
@@ -109,7 +109,7 @@
>
<motion.button
onClick={() => handleSceneChange(scene)}
- className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative
+ className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative cursor-pointer
${selectedScene.chatbotId === scene.chatbotId
? 'text-[#6ADBFF] bg-gray-100 shadow-sm'
: 'text-gray-600 hover:text-[#6ADBFF] hover:bg-gray-50'
@@ -138,8 +138,20 @@
/>
<div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
</div>
- <div className="relative max-w-[120px]">
- <span className="font-medium truncate block w-full">{scene.title}</span>
+ <div className="relative max-w-[120px] group/text">
+ <span className="font-medium truncate block w-full" ref={(el) => {
+ if (el) {
+ el.dataset.truncated = (el.scrollWidth > el.clientWidth).toString();
+ }
+ }}>{scene.title}</span>
+ {/* Tooltip - 鍙湪鏂囨湰琚埅鏂椂鏄剧ず */}
+ <div
+ className="absolute left-1/2 -translate-x-1/2 -top-2 -translate-y-full bg-gray-800/95 text-white text-sm px-3 py-2 rounded-lg opacity-0 invisible data-[show=true]:group-hover/text:opacity-100 data-[show=true]:group-hover/text:visible transition-all duration-200 whitespace-nowrap shadow-lg z-[1000]"
+ data-show={scene.title.length > 8}
+ >
+ <div className="absolute left-1/2 -translate-x-1/2 top-full border-[6px] border-transparent border-t-gray-800/95"></div>
+ {scene.title}
+ </div>
</div>
</div>
{selectedScene.chatbotId === scene.chatbotId && (
@@ -152,13 +164,6 @@
/>
)}
</motion.button>
- {/* Tooltip */}
- <div
- className="absolute left-1/2 -translate-x-1/2 -top-2 -translate-y-full bg-gray-800/95 text-white text-sm px-3 py-2 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap shadow-lg z-[1000]"
- >
- <div className="absolute left-1/2 -translate-x-1/2 top-full border-[6px] border-transparent border-t-gray-800/95"></div>
- {scene.title}
- </div>
</motion.div>
))}
</div>
--
Gitblit v1.9.3