From cb3f6befb0f2e3eb8e059f1e7e4cd92a0e4d6ee4 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 10 四月 2025 11:13:39 +0800
Subject: [PATCH] 聊天页面优化
---
src/app/ai-scene/chat/page.tsx | 156 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 102 insertions(+), 54 deletions(-)
diff --git a/src/app/ai-scene/chat/page.tsx b/src/app/ai-scene/chat/page.tsx
index 52f1cb3..b0b9297 100644
--- a/src/app/ai-scene/chat/page.tsx
+++ b/src/app/ai-scene/chat/page.tsx
@@ -4,7 +4,7 @@
import { motion, AnimatePresence } from 'framer-motion';
// 瀵煎叆鍦烘櫙鏁版嵁
-const services = [
+const defaultServices = [
{
title: '琛ユ枡',
description: '鏅鸿兘鍔ㄦ�佸垎鏋愪骇绾匡紝宸ヤ綅鐨勭己鏂欐儏鍐碉紝闄嶄綆鍋滅嚎椋庨櫓',
@@ -32,8 +32,9 @@
];
export default function AISceneChatPage() {
+ const [services, setServices] = useState(defaultServices);
const [selectedScene, setSelectedScene] = useState(services[0]);
- const [iframeKey, setIframeKey] = useState(0); // 鐢ㄤ簬寮哄埗鍒锋柊iframe
+ const [iframeKey, setIframeKey] = useState(0);
// 鍒囨崲鍦烘櫙鏃堕噸鏂板姞杞絠frame
const handleSceneChange = (scene: typeof services[0]) => {
@@ -41,13 +42,25 @@
setIframeKey(prev => prev + 1);
};
+ // 娣诲姞鏂板満鏅�
+ const handleAddNewScene = () => {
+ const newScene = {
+ title: `鏂板満鏅� ${services.length + 1}`,
+ description: '杩欐槸涓�涓柊鐨凙I鍦烘櫙',
+ imageUrl: '/images/robot.jpg', // 榛樿鍥剧墖
+ chatbotId: `new-scene-${Date.now()}`, // 鐢熸垚鍞竴ID
+ };
+ setServices(prev => [...prev, newScene]);
+ };
+
return (
- <div className="h-screen flex bg-[#0A1033]">
+ <div className="h-screen flex bg-white">
{/* 宸︿晶鍦烘櫙閫夐」鍗� */}
- <div className="w-64 bg-[#131C41] border-r border-[#6ADBFF]/20 flex flex-col">
- <div className="p-4 flex-1 overflow-y-auto">
- <h2 className="text-xl font-bold text-white mb-6 flex items-center">
- <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
+ <div className="w-64 bg-white border-r flex flex-col">
+ {/* 鍥哄畾澶撮儴 */}
+ <div className="p-4 pt-20 bg-white">
+ <h2 className="text-xl font-bold flex items-center mb-4">
+ <span className="text-gray-900">
AI鍦烘櫙
</span>
<motion.span
@@ -63,64 +76,99 @@
}}
/>
</h2>
- <div className="space-y-3">
+
+ {/* 鏂板鍦烘櫙鎸夐挳 */}
+ <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"
+ >
+ <svg
+ className="w-5 h-5 mr-2"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ >
+ <path
+ d="M12 5v14M5 12h14"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ 寮�鍚柊鍦烘櫙
+ </button>
+ </div>
+
+ {/* 婊氬姩鍐呭鍖� */}
+ <div className="flex-1 overflow-y-auto px-4 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]">
+ <div className="space-y-3 py-4">
{services.map((scene) => (
- <motion.button
+ <motion.div
key={scene.chatbotId}
- onClick={() => handleSceneChange(scene)}
- className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative overflow-hidden
- ${selectedScene.chatbotId === scene.chatbotId
- ? 'text-[#6ADBFF]'
- : 'text-gray-300 hover:text-[#6ADBFF]'
- }`}
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
+ className="relative group"
>
- {selectedScene.chatbotId === scene.chatbotId && (
- <motion.div
- className="absolute inset-0 bg-gradient-to-r from-[#1A2547] to-[#1E2B63] -z-10"
- layoutId="activeBackground"
- initial={false}
- transition={{
- type: "spring",
- stiffness: 200,
- damping: 20
- }}
- />
- )}
- <div className="flex items-center relative z-10">
- <div className="w-10 h-10 rounded-lg overflow-hidden mr-3 relative">
- <img
- src={scene.imageUrl}
- alt={scene.title}
- className="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
+ <motion.button
+ onClick={() => handleSceneChange(scene)}
+ className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative
+ ${selectedScene.chatbotId === scene.chatbotId
+ ? 'text-[#6ADBFF] bg-gray-100 shadow-sm'
+ : 'text-gray-600 hover:text-[#6ADBFF] hover:bg-gray-50'
+ }`}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {selectedScene.chatbotId === scene.chatbotId && (
+ <motion.div
+ className="absolute inset-0 bg-gradient-to-r from-gray-100 to-gray-50 -z-10"
+ layoutId="activeBackground"
+ initial={false}
+ transition={{
+ type: "spring",
+ stiffness: 200,
+ damping: 20
+ }}
/>
- <div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
+ )}
+ <div className="flex items-center relative z-10">
+ <div className="w-8 h-8 rounded-lg overflow-hidden mr-3 relative flex-shrink-0">
+ <img
+ src={scene.imageUrl}
+ alt={scene.title}
+ className="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
+ />
+ <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>
</div>
- <div>
- <span className="font-medium block">{scene.title}</span>
- <span className="text-xs text-gray-400 line-clamp-1">{scene.description}</span>
- </div>
+ {selectedScene.chatbotId === scene.chatbotId && (
+ <motion.div
+ className="absolute right-3 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-[#6ADBFF] rounded-full"
+ layoutId="activeIndicator"
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ />
+ )}
+ </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>
- {selectedScene.chatbotId === scene.chatbotId && (
- <motion.div
- className="absolute right-3 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-[#6ADBFF] rounded-full"
- layoutId="activeIndicator"
- initial={{ opacity: 0 }}
- animate={{ opacity: 1 }}
- exit={{ opacity: 0 }}
- />
- )}
- </motion.button>
+ </motion.div>
))}
</div>
</div>
</div>
{/* 涓棿鑱婂ぉ鍖哄煙 */}
- <div className="flex-1 flex flex-col bg-gradient-to-br from-[#0A1033] to-[#131C41]">
+ <div className="flex-1 flex flex-col bg-white">
{/* 椤堕儴鏍囬鏍� */}
- <div className="h-16 border-b border-[#6ADBFF]/20 flex items-center px-6 bg-[#131C41]/50 backdrop-blur-sm">
+ <div className="h-16 border-b flex items-center px-6 bg-white">
<AnimatePresence mode="wait">
<motion.div
key={selectedScene.chatbotId}
@@ -139,10 +187,10 @@
<div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
</div>
<div>
- <h1 className="text-xl font-bold text-white">
+ <h1 className="text-xl font-bold text-gray-800">
{selectedScene.title}
</h1>
- <p className="text-sm text-gray-400">
+ <p className="text-sm text-gray-500">
{selectedScene.description}
</p>
</div>
--
Gitblit v1.9.3