AI场景页面优化

hongjli

2025-04-09 61b3726482da7db846444f5f71d5ee538c3d7789

 src/components/SceneIntroDialog.tsx

@@ -1,8 +1,8 @@
"use client";

import { Dialog, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import { motion } from 'framer-motion';
import { Fragment, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface SceneIntroDialogProps {
  isOpen: boolean;
@@ -14,6 +14,7 @@
    imageUrl: string;
    background?: string;
    instructions?: string;
    dataDescription?: string;
  };
}

@@ -23,19 +24,56 @@
  onStartChat,
  scene
}: SceneIntroDialogProps) {
  // 确保动画状态在每次打开时都被重置
  useEffect(() => {
    if (isOpen) {
      // 重置所有动画元素的状态
      const animatedElements = document.querySelectorAll('.dialog-animated');
      animatedElements.forEach(el => {
        if (el instanceof HTMLElement) {
          el.style.opacity = '0';
          el.style.transform = 'none';
          void el.offsetHeight; // 触发重排
        }
      });
    }
  }, [isOpen]);

  return (
    <Transition appear show={isOpen} as={Fragment}>
    <AnimatePresence>
      {isOpen && (
        <Transition 
          appear 
          show={isOpen} 
          as={Fragment}
          afterLeave={() => {
            // 清理动画资源
            document.body.style.removeProperty('pointer-events');
            window.requestAnimationFrame(() => {
              const elements = document.querySelectorAll('.animate-fade-out, .animate-slide-out, .dialog-animated');
              elements.forEach(el => {
                if (el instanceof HTMLElement) {
                  el.style.animation = 'none';
                  el.style.opacity = '';
                  el.style.transform = '';
                  void el.offsetHeight; // 触发重排以确保动画重置
                  el.style.removeProperty('animation');
                }
              });
            });
          }}
        >
      <Dialog as="div" className="relative z-50" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-500"
              enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-300"
              leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/80 backdrop-blur-sm" />
              <div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0">
@@ -45,11 +83,18 @@
              enter="transform transition ease-out duration-400"
              enterFrom="translate-x-full"
              enterTo="translate-x-0"
              leave="transform transition ease-in duration-300"
                  leave="transform transition ease-in-out duration-300"
              leaveFrom="translate-x-0"
              leaveTo="translate-x-full"
                  afterLeave={() => {
                    const panel = document.querySelector('.dialog-panel');
                    if (panel instanceof HTMLElement) {
                      panel.style.transform = '';
                      panel.style.transition = '';
                    }
                  }}
            >
              <Dialog.Panel className="w-[75vw] h-full bg-gradient-to-br from-[#131C41] to-[#0A1033] shadow-[0_0_50px_rgba(106,219,255,0.2)]">
                  <Dialog.Panel className="dialog-panel w-[75vw] h-full bg-gradient-to-br from-[#131C41] to-[#0A1033] shadow-[0_0_50px_rgba(106,219,255,0.2)]">
                <div className="h-full overflow-y-auto">
                  <div className="p-8">
                    <div className="max-w-[1200px] mx-auto">
@@ -133,12 +178,28 @@
                          </p>
                        </motion.div>

                            {/* 数据说明 */}
                            <motion.div 
                              className="bg-[#1A2547] rounded-lg p-6"
                              initial={{ opacity: 0, x: -20 }}
                              animate={{ opacity: 1, x: 0 }}
                              transition={{ duration: 0.5, delay: 0.6 }}
                            >
                              <h3 className="text-lg font-semibold text-[#6ADBFF] mb-4 flex items-center">
                                <div className="w-1 h-4 bg-[#6ADBFF] mr-2"></div>
                                数据说明
                              </h3>
                              <p className="text-gray-300 leading-relaxed">
                                {scene.dataDescription || '本场景所使用的数据均为模拟数据，仅用于演示目的。在实际应用中，将根据您的具体需求使用真实数据进行分析和处理。'}
                              </p>
                            </motion.div>

                        {/* 按钮组 */}
                        <motion.div 
                          className="sticky bottom-0 bg-gradient-to-br from-[#131C41] to-[#0A1033] pt-4"
                          initial={{ opacity: 0, y: 20 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ duration: 0.5, delay: 0.6 }}
                              transition={{ duration: 0.5, delay: 0.7 }}
                        >
                          <div className="flex justify-end gap-4">
                            <button
@@ -173,5 +234,7 @@
        </div>
      </Dialog>
    </Transition>
      )}
    </AnimatePresence>
  );
}