"use client";
|
|
import { useState } from 'react';
|
import Card from '@/components/Card';
|
import ChatDialog from '@/components/ChatDialog';
|
import Navbar from '@/components/layout/Navbar';
|
|
const services = [
|
{
|
title: '补料',
|
description: '智能动态分析产线，工位的缺料情况，降低停线风险',
|
imageUrl: '/images/kanban.jpg',
|
chatbotId: 'JELkWpPLHQfRNhEH'
|
},
|
{
|
title: '插单',
|
description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
|
imageUrl: '/images/xuqiu.jpg',
|
chatbotId: 'DfH4cIzujVGvn5iR'
|
},
|
{
|
title: '科沃斯销售推荐小助手',
|
description: '智能化产品推荐提升导购效率',
|
imageUrl: '/images/robot.jpg',
|
chatbotId: 'sUAviPXvcEIw3oQC'
|
},
|
{
|
title: '库存管理知识库问答',
|
description: '库存知识，提供专业的供应链库存知识问答',
|
imageUrl: '/images/know.jpg',
|
chatbotId: 'pDDfkU9HyBl2gzXx'
|
},
|
];
|
|
export default function AIScenePage() {
|
const [isChatOpen, setIsChatOpen] = useState(false);
|
const [currentChatbot, setCurrentChatbot] = useState('');
|
|
const handleCardClick = (title: string, chatbotId?: string) => {
|
if (chatbotId) {
|
setCurrentChatbot(chatbotId);
|
setIsChatOpen(true);
|
}
|
};
|
|
return (
|
<>
|
<Navbar />
|
<div className="min-h-screen pt-16">
|
<div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white">
|
<div className="max-w-7xl mx-auto">
|
<div className="mb-8">
|
<h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2">
|
AI场景模拟
|
<span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span>
|
</h1>
|
<p className="text-gray-600">选择以下场景，体验人工智能如何解决实际业务问题</p>
|
<div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div>
|
</div>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
{services.map((service, index) => (
|
<Card
|
key={index}
|
{...service}
|
onClick={() => handleCardClick(service.title, service.chatbotId)}
|
/>
|
))}
|
</div>
|
</div>
|
</div>
|
<ChatDialog
|
isOpen={isChatOpen}
|
onClose={() => setIsChatOpen(false)}
|
chatbotId={currentChatbot}
|
/>
|
</div>
|
</>
|
);
|
}
|
