From 8ecc92be2e638f40b9b006535af0209f5b7c152d Mon Sep 17 00:00:00 2001 From: hongjli <3117313295@qq.com> Date: 星期三, 09 四月 2025 16:03:26 +0800 Subject: [PATCH] 数据演示对话框 --- src/components/SceneIntroDialog.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/components/SceneIntroDialog.tsx b/src/components/SceneIntroDialog.tsx index 20fadbd..b8fb679 100644 --- a/src/components/SceneIntroDialog.tsx +++ b/src/components/SceneIntroDialog.tsx @@ -1,8 +1,9 @@ "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; @@ -15,6 +16,7 @@ background?: string; instructions?: string; dataDescription?: string; + exampleData?: string; }; } @@ -24,6 +26,8 @@ onStartChat, scene }: SceneIntroDialogProps) { + const [showDataPreview, setShowDataPreview] = useState(false); + // 纭繚鍔ㄧ敾鐘舵�佸湪姣忔鎵撳紑鏃堕兘琚噸缃� useEffect(() => { if (isOpen) { @@ -241,15 +245,53 @@ <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="w-1 h-4 bg-[#6ADBFF] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> - 鏁版嵁璇存槑 - </h3> + <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> -- Gitblit v1.9.3