聊天页面优化

hongjli

2025-04-10 cb3f6befb0f2e3eb8e059f1e7e4cd92a0e4d6ee4

聊天页面优化

 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);

  // 切换场景时重新加载iframe
  const handleSceneChange = (scene: typeof services[0]) => {
@@ -41,13 +42,25 @@
    setIframeKey(prev => prev + 1);
  };

  // 添加新场景
  const handleAddNewScene = () => {
    const newScene = {
      title: `新场景 ${services.length + 1}`,
      description: '这是一个新的AI场景',
      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>