hongjli
2025-04-10 36d9b7b4959bcd44acf0f15cd270ea275f4ee831
聊天页面优化
已修改2个文件
46 ■■■■ 文件已修改
src/app/ai-scene/chat/page.tsx 44 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/SceneIntroDialog.tsx 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/app/ai-scene/chat/page.tsx
@@ -2,6 +2,8 @@
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
// 导入场景数据
const defaultServices = [
@@ -42,8 +44,14 @@
];
export default function AISceneChatPage() {
  const [services, setServices] = useState(defaultServices);
  const [selectedScene, setSelectedScene] = useState(services[0]);
  const searchParams = useSearchParams();
  const sceneId = searchParams.get('scene');
  const router = useRouter();
  // 根据URL参数找到对应的场景
  const initialScene = defaultServices.find(s => s.chatbotId === sceneId) || defaultServices[0];
  const [services] = useState([initialScene]);
  const [selectedScene, setSelectedScene] = useState(initialScene);
  const [iframeKey, setIframeKey] = useState(0);
  // 切换场景时重新加载iframe
@@ -52,24 +60,14 @@
    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-white">
      {/* 左侧场景选项卡 */}
      <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">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold flex items-center">
            <span className="text-gray-900">
              AI场景
            </span>
@@ -86,28 +84,28 @@
              }}
            />
          </h2>
          {/* 新增场景按钮 */}
          <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 cursor-pointer"
              onClick={() => router.push('/ai-scene')}
              className="group flex items-center px-4 py-2 text-sm text-red-500 hover:text-white bg-red-50 hover:bg-red-500 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md"
          >
            <svg 
              className="w-5 h-5 mr-2"
              viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                className="h-4 w-4 mr-1.5 transition-transform duration-300 group-hover:-translate-x-0.5"
              fill="none"
                viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path 
                d="M12 5v14M5 12h14"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                  strokeWidth={2}
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
              />
            </svg>
            开启新场景
              <span className="font-medium">返回</span>
          </button>
        </div>
        </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]">
src/components/SceneIntroDialog.tsx
@@ -46,7 +46,7 @@
  const handleStartChat = () => {
    onClose();
    router.push('/ai-scene/chat');
    router.push(`/ai-scene/chat?scene=${scene.chatbotId}`);
  };
  return (