| | |
|---|
| | | "use client"; |
|---|
| | | |
|---|
| | | import { Dialog, Transition } from '@headlessui/react'; |
|---|
| | | import { Fragment, useEffect } from 'react'; |
|---|
| | | import { Fragment, useEffect, useState } from 'react'; |
|---|
| | | import { motion, AnimatePresence } from 'framer-motion'; |
|---|
| | | import DataPreviewDialog from './DataPreviewDialog'; |
|---|
| | | |
|---|
| | | interface SceneIntroDialogProps { |
|---|
| | | isOpen: boolean; |
|---|
| | |
|---|
| | | background?: string; |
|---|
| | | instructions?: string; |
|---|
| | | dataDescription?: string; |
|---|
| | | exampleData?: string; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | onStartChat, |
|---|
| | | scene |
|---|
| | | }: SceneIntroDialogProps) { |
|---|
| | | const [showDataPreview, setShowDataPreview] = useState(false); |
|---|
| | | |
|---|
| | | // 确保动画状态在每次打开时都被重置 |
|---|
| | | useEffect(() => { |
|---|
| | | if (isOpen) { |
|---|
| | |
|---|
| | | <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div> |
|---|
| | | |
|---|
| | | <div className="relative"> |
|---|
| | | <h3 className="text-lg font-semibold mb-4 flex items-center text-white group-hover:text-[#6ADBFF] transition-colors duration-300"> |
|---|
| | | <div className="flex items-center justify-between mb-4"> |
|---|
| | | <h3 className="text-lg font-semibold flex items-center text-white group-hover:text-[#6ADBFF] transition-colors duration-300"> |
|---|
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> |
|---|
| | | 数据说明 |
|---|
| | | </h3> |
|---|
| | | <button |
|---|
| | | onClick={() => setShowDataPreview(true)} |
|---|
| | | className="flex items-center px-3 py-1.5 text-sm text-[#6ADBFF] hover:text-white bg-[#1A2547]/50 hover:bg-[#6ADBFF]/10 rounded-full transition-all duration-300 group/btn" |
|---|
| | | > |
|---|
| | | <svg |
|---|
| | | xmlns="http://www.w3.org/2000/svg" |
|---|
| | | className="h-4 w-4 mr-1.5 opacity-70 group-hover/btn:opacity-100 transition-opacity duration-300" |
|---|
| | | fill="none" |
|---|
| | | viewBox="0 0 24 24" |
|---|
| | | stroke="currentColor" |
|---|
| | | > |
|---|
| | | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" /> |
|---|
| | | </svg> |
|---|
| | | 演示数据 |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300"> |
|---|
| | | {scene.dataDescription || '本场景所使用的数据均为模拟数据，仅用于演示目的。在实际应用中，将根据您的具体需求使用真实数据进行分析和处理。'} |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | </motion.div> |
|---|
| | | |
|---|
| | | {/* 示例数据预览对话框 */} |
|---|
| | | <DataPreviewDialog |
|---|
| | | isOpen={showDataPreview} |
|---|
| | | onClose={() => setShowDataPreview(false)} |
|---|
| | | markdownContent={scene.exampleData || ` |
|---|
| | | ### 演示数据 |
|---|
| | | |
|---|
| | | | 工位 | 原材料需求 | 原材料消耗速率 | 生产的产品 | 产线名 | |
|---|
| | | |------|------------|----------------|------------|--------| |
|---|
| | | | 1 | A1 | 2/小时 | P | 产线1 | |
|---|
| | | | 2 | A2 | 1/小时 | P | 产线1 | |
|---|
| | | | 3 | A3 | 2/小时 | P | 产线1 | |
|---|
| | | | 4 | A4 | 4/小时 | P | 产线1 | |
|---|
| | | | 5 | A5 | 5/小时 | P | 产线1 | |
|---|
| | | | 6 | - | - | P | 产线1 | |
|---|
| | | | 7 | A7 | 3/小时 | P | 产线1 | |
|---|
| | | | 8 | - | - | P | 产线1 | |
|---|
| | | | 9 | A9 | 3/小时 | P | 产线1 | |
|---|
| | | `} |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
