页面调整优化

hongjli

2025-06-05 05e55761058e2089e81fb93dd4000dc3f42f40b3

 src/components/SceneIntroDialog.tsx

@@ -4,7 +4,6 @@
import { Fragment, useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import DataPreviewDialog from './DataPreviewDialog';
import { useRouter } from 'next/navigation';

interface SceneIntroDialogProps {
  isOpen: boolean;
@@ -27,7 +26,6 @@
  scene
}: SceneIntroDialogProps) {
  const [showDataPreview, setShowDataPreview] = useState(false);
  const router = useRouter();

  // 确保动画状态在每次打开时都被重置
  useEffect(() => {
@@ -46,8 +44,66 @@

  const handleStartChat = () => {
    onClose();
    router.push(`/ai-scene/chat?scene=${scene.chatbotId}`);
    // 供应链全景洞察场景使用专用的聊天页面
    if (scene.chatbotId === 'SCPanoramaInsight') {
      window.location.href = `/supply-chain-chat?key=app-6IZEwVNGfHrlLFlgLauLHtHo`;
    } else {
      window.location.href = `/ai-scene/chat?chatbotId=${scene.chatbotId}`;
    }
  };

  // 解析场景背景内容
  const parseBackground = (background: string): { simple: string } | { intro: string; sections: Array<{ title: string; items: string[] }> } | null => {
    if (!background) return null;
    
    // 检查是否包含结构化内容（如供应链全景洞察的格式）
    if (background.includes('**') && background.includes('：')) {
      const sections = background.split('\n\n').filter(section => section.trim());
      const intro = sections[0];
      const detailSections = sections.slice(1);
      
      return {
        intro,
        sections: detailSections.map(section => {
          const lines = section.split('\n');
          const title = lines[0].replace(/\*\*/g, '').replace('：', '');
          const items = lines.slice(1).filter(line => line.trim().startsWith('-')).map(line => line.replace('- ', ''));
          return { title, items };
        })
      };
    }
    
    return { simple: background };
  };

  // 解析使用说明内容
  const parseInstructions = (instructions: string): { simple: string } | { intro: string; scenarios: Array<{ title: string; description: string }>; conclusion: string } | null => {
    if (!instructions) return null;
    
    // 检查是否包含场景格式
    if (instructions.includes('**场景') && instructions.includes('：')) {
      const sections = instructions.split('\n\n').filter(section => section.trim());
      const intro = sections[0];
      const scenarios = sections.slice(1, -1).map(section => {
        const lines = section.split('\n');
        const title = lines[0].replace(/\*\*/g, '').replace('：', '');
        const description = lines[1] || '';
        return { title, description };
      });
      const conclusion = sections[sections.length - 1];
      
      return {
        intro,
        scenarios,
        conclusion
      };
    }
    
    return { simple: instructions };
  };

  const backgroundData = parseBackground(scene.background || '');
  const instructionsData = parseInstructions(scene.instructions || '');

  return (
    <AnimatePresence>
@@ -201,10 +257,36 @@
                                }}
                                className="bg-[#1A2547] rounded-lg p-6 border border-[#6ADBFF]/10"
                              >
                                <h3 className="text-lg font-medium text-[#6ADBFF] mb-3">场景背景</h3>
                                <p className="text-gray-300 leading-relaxed">
                                  {scene.background}
                                </p>
                                <h3 className="text-lg font-medium text-[#6ADBFF] mb-4">场景背景</h3>
                                {backgroundData && 'simple' in backgroundData ? (
                                  <p className="text-gray-300 leading-relaxed">
                                    {backgroundData.simple}
                                  </p>
                                ) : backgroundData && 'sections' in backgroundData && (
                                  <div className="space-y-4">
                                    <p className="text-gray-300 leading-relaxed">
                                      {backgroundData.intro}
                                    </p>
                                    <div className="grid gap-4">
                                      {backgroundData.sections.map((section, index) => (
                                        <div key={index} className="bg-[#0F1629] rounded-lg p-4 border border-[#6ADBFF]/5">
                                          <h4 className="text-[#FF6A88] font-medium mb-3 flex items-center">
                                            <div className="w-2 h-2 rounded-full bg-[#FF6A88] mr-2"></div>
                                            {section.title}
                                          </h4>
                                          <ul className="space-y-2">
                                            {section.items.map((item, itemIndex) => (
                                              <li key={itemIndex} className="text-gray-300 text-sm flex items-start">
                                                <div className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 mt-2 mr-3 flex-shrink-0"></div>
                                                <span>{item}</span>
                                              </li>
                                            ))}
                                          </ul>
                                        </div>
                                      ))}
                                    </div>
                                  </div>
                                )}
                              </motion.div>

                              {/* 使用说明 */}
@@ -218,10 +300,40 @@
                                }}
                                className="bg-[#1A2547] rounded-lg p-6 border border-[#6ADBFF]/10"
                              >
                                <h3 className="text-lg font-medium text-[#6ADBFF] mb-3">使用说明</h3>
                                <p className="text-gray-300 leading-relaxed">
                                  {scene.instructions}
                                </p>
                                <h3 className="text-lg font-medium text-[#6ADBFF] mb-4">使用说明</h3>
                                {instructionsData && 'simple' in instructionsData ? (
                                  <p className="text-gray-300 leading-relaxed">
                                    {instructionsData.simple}
                                  </p>
                                ) : instructionsData && 'scenarios' in instructionsData && (
                                  <div className="space-y-4">
                                    <p className="text-gray-300 leading-relaxed">
                                      {instructionsData.intro}
                                    </p>
                                    <div className="grid gap-3">
                                      {instructionsData.scenarios.map((scenario, index) => (
                                        <div key={index} className="bg-[#0F1629] rounded-lg p-4 border border-[#6ADBFF]/5 hover:border-[#6ADBFF]/20 transition-colors duration-300">
                                          <div className="flex items-center mb-2">
                                            <div className="w-6 h-6 rounded-full bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] flex items-center justify-center mr-3">
                                              <span className="text-white text-xs font-medium">{index + 1}</span>
                                            </div>
                                            <h4 className="text-[#F5A800] font-medium">
                                              {scenario.title}
                                            </h4>
                                          </div>
                                          <p className="text-gray-300 text-sm ml-9">
                                            {scenario.description}
                                          </p>
                                        </div>
                                      ))}
                                    </div>
                                    <div className="mt-4 p-4 bg-[#0F1629] rounded-lg border border-[#6ADBFF]/5">
                                      <p className="text-gray-300 text-sm">
                                        {instructionsData.conclusion}
                                      </p>
                                    </div>
                                  </div>
                                )}
                              </motion.div>

                              {/* 数据说明区块 - 只在特定场景显示 */}
@@ -264,7 +376,8 @@
                                  onClose={() => setShowDataPreview(false)}
                                  markdownContent={scene.exampleData}
                                  sceneType={scene.chatbotId === 'RhMYLHI1SZNiX4kl' || scene.chatbotId === 'zO9YQDEHdIApG9zC' ? 'chadan' :
                                           scene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' : undefined}
                                           scene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' :
                                           scene.chatbotId === 'SCPanoramaInsight' ? 'panorama' : undefined}
                                />
                              )}
                            </div>