From 05e55761058e2089e81fb93dd4000dc3f42f40b3 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 05 六月 2025 16:17:12 +0800
Subject: [PATCH] 页面调整优化
---
src/app/ai-scene/chat/page.tsx | 168 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 136 insertions(+), 32 deletions(-)
diff --git a/src/app/ai-scene/chat/page.tsx b/src/app/ai-scene/chat/page.tsx
index 0c02755..4d40b9a 100644
--- a/src/app/ai-scene/chat/page.tsx
+++ b/src/app/ai-scene/chat/page.tsx
@@ -1,9 +1,10 @@
"use client";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
+import Image from 'next/image';
import DataPreviewDialog from '@/components/DataPreviewDialog';
// 瀵煎叆鍦烘櫙鏁版嵁
@@ -80,13 +81,13 @@
title: '鎻掑崟1.0',
description: '鏅鸿兘璇勪及闇�姹傛彃鍗曞浜ц兘锛屽師鏉愭枡鍜屼氦浠樻湇鍔＄殑褰卞搷锛屾彁鍗囧鎴锋弧鎰忓害',
imageUrl: '/images/xuqiu.jpg',
- chatbotId: 'DfH4cIzujVGvn5iR',
+ chatbotId: 'RhMYLHI1SZNiX4kl',
background: '鍦ㄧ敓浜ц鍒掓墽琛岃繃绋嬩腑锛屽父甯镐細閬囧埌绱ф�ヨ鍗曢渶瑕佹彃鍗曠殑鎯呭喌銆侫I绯荤粺鍙互蹇�熻瘎浼版彃鍗曞鐜版湁鐢熶骇璁″垝鐨勫奖鍝嶏紝骞舵彁渚涙渶浼樼殑鎻掑崟鏂规銆�',
instructions: '璇锋彁渚涢渶瑕佹彃鍗曠殑璁㈠崟淇℃伅锛屽寘鎷骇鍝佺被鍨嬨�佹暟閲忓拰鏈熸湜浜や粯鏃堕棿锛孉I鍔╂墜灏嗕负鎮ㄥ垎鏋愬彲琛屾�у苟缁欏嚭鍏蜂綋鐨勬彃鍗曞缓璁��',
dataDescription: '鏈満鏅�氳繃鏁村悎ERP銆丮ES绛夌郴缁熺殑瀹炴椂鏁版嵁锛岀粨鍚圓I绠楁硶杩涜鏅鸿兘鍒嗘瀽鍜岄璀︺�備互涓嬩负婕旂ず鏁版嵁锛屽疄闄呬娇鐢ㄦ椂灏嗚嚜鍔ㄥ鎺ョ浉鍏充笟鍔＄郴缁熴��',
exampleData: `
-### 鍩虹鏁版嵁鏄繖鏍风殑锛氫骇鍝侊細A锛孊锛孋
-### A, B, C鐨凚OM鏄繖鏍风殑
+### 鍩虹鏁版嵁锛氫骇鍝侊細A锛孊锛孋
+### A, B, C鐨凚OM
| 浜у搧 | 鐗╂枡 | 鐗╂枡鍗曚綅鐢ㄩ噺 |
| :--: | :--: | :--: |
@@ -100,7 +101,7 @@
| C | 1002 | 3 |
| C | 1003 | 2 |
-### 闇�姹傛暟鎹槸杩欐牱鐨�
+### 闇�姹傛暟鎹�
| 浜у搧 | 闇�姹傛暟閲� | 闇�姹傛棩鏈� | 闇�姹傚崟鍙� | 瀹㈡埛 | 鍗曚环 |
| :--: | :--: | :--: | :--: | :--: | :--: |
@@ -150,8 +151,8 @@
instructions: '璇锋彁渚涢渶瑕佹彃鍗曠殑璁㈠崟淇℃伅锛屽寘鎷骇鍝佺被鍨嬨�佹暟閲忓拰鏈熸湜浜や粯鏃堕棿锛孉I鍔╂墜灏嗕负鎮ㄥ垎鏋愬彲琛屾�у苟缁欏嚭鍏蜂綋鐨勬彃鍗曞缓璁��',
dataDescription: '鏈満鏅�氳繃鏁村悎ERP銆丮ES绛夌郴缁熺殑瀹炴椂鏁版嵁锛岀粨鍚圓I绠楁硶杩涜鏅鸿兘鍒嗘瀽鍜岄璀︺�備互涓嬩负婕旂ず鏁版嵁锛屽疄闄呬娇鐢ㄦ椂灏嗚嚜鍔ㄥ鎺ョ浉鍏充笟鍔＄郴缁熴��',
exampleData: `
-### 鍩虹鏁版嵁鏄繖鏍风殑锛氫骇鍝侊細A锛孊锛孋
-### A, B, C鐨凚OM鏄繖鏍风殑
+### 鍩虹鏁版嵁锛氫骇鍝侊細A锛孊锛孋
+### A, B, C鐨凚OM
| 浜у搧 | 鐗╂枡 | 鐗╂枡鍗曚綅鐢ㄩ噺 |
| :--: | :--: | :--: |
@@ -165,7 +166,7 @@
| C | 1002 | 3 |
| C | 1003 | 2 |
-### 闇�姹傛暟鎹槸杩欐牱鐨�
+### 闇�姹傛暟鎹�
| 浜у搧 | 闇�姹傛暟閲� | 闇�姹傛棩鏈� | 闇�姹傚崟鍙� | 瀹㈡埛 | 鍗曚环 |
| :--: | :--: | :--: | :--: | :--: | :--: |
@@ -206,20 +207,129 @@
| S5 | 1005 | 16673976114@163.com |
`
},
+ {
+ title: '渚涘簲閾惧叏鏅礊瀵�',
+ description: '閫氳繃AI Agent涓嶢PS鐨勬繁搴﹀崗鍚岋紝灏嗘彃鍗曞搷搴斾粠"琚姩鏁戠伀"鍗囩骇涓�"棰勬祴-鍐崇瓥-鎵ц"涓変綅涓�浣撶殑鏅鸿兘杩愯惀妯″紡锛屽姪鍔涙柊鑳芥簮涓氬姟澧為暱銆�',
+ imageUrl: '/images/333.png',
+ chatbotId: 'SCPanoramaInsight',
+ background: `渚涘簲閾惧叏鏅礊瀵熺郴缁熸槸鏂颁竴浠ｆ櫤鑳戒緵搴旈摼绠＄悊骞冲彴鐨勬牳蹇冨紩鎿庛�傝AI绯荤粺鑳藉瑙ｅ喅浼犵粺渚涘簲閾剧鐞嗕腑鐨勫洓澶у叧閿棶棰橈細
+
+**鐢熶骇璁″垝涓庝骇鑳藉奖鍝嶈瘎浼帮細**
+- 瀹炴椂鐩戞帶鐢熶骇绾跨姸鎬侊紝鍔ㄦ�佽瘎浼颁骇鑳藉埄鐢ㄧ巼
+- 鍩轰簬鍘嗗彶鏁版嵁鍜屽疄鏃惰鍗曪紝鏅鸿兘棰勬祴鐢熶骇鐡堕
+- 鑷姩璋冩暣鐢熶骇璁″垝锛屾渶澶у寲浜ц兘鍒╃敤鏁堢巼
+- 鎻愪緵澶氬満鏅敓浜ц鍒掑姣斿垎鏋愶紝杈呭姪鍐崇瓥鍒跺畾
+
+**渚涘簲鍗忓悓鑳藉姏璇勪及锛�**
+- 瀹炴椂杩借釜渚涘簲鍟嗕氦浠樼姸鎬侊紝璇勪及渚涘簲椋庨櫓
+- 鏅鸿兘鍒嗘瀽渚涘簲鍟嗙哗鏁堬紝鎻愪緵渚涘簲鍟嗕紭鍖栧缓璁�
+- 棰勬祴鍘熸潗鏂欓渶姹傦紝鎻愬墠鍚姩閲囪喘娴佺▼
+- 鏋勫缓渚涘簲閾剧綉缁滈煣鎬фā鍨嬶紝鎻愬崌鎶楅闄╄兘鍔�
+
+**浜や粯灞ョ害椋庨櫓璇勪及锛�**
+- 鍩轰簬璁㈠崟銆佸簱瀛樸�佺敓浜ц繘搴﹁繘琛岀患鍚堥闄╄瘎浼�
+- 鎻愬墠璇嗗埆娼滃湪寤舵湡椋庨櫓锛屽埗瀹氬簲瀵归妗�
+- 瀹炴椂璺熻釜浜や粯杩涘害锛岀‘淇濆鎴锋弧鎰忓害
+- 寤虹珛瀹㈡埛棰勬湡绠＄悊鏈哄埗锛屾彁鍗囨湇鍔′綋楠�
+
+**鎴愭湰涓庤储鍔″奖鍝嶈瘎浼帮細**
+- 鍏ㄩ摼璺垚鏈拷韪紝绮剧‘璁＄畻鍚勭幆鑺傛垚鏈瀯鎴�
+- 鍔ㄦ�佹垚鏈紭鍖栧缓璁紝闄嶄綆鏁翠綋杩愯惀鎴愭湰
+- 璐㈠姟褰卞搷棰勬祴鍒嗘瀽锛屾敮鎸佸晢涓氬喅绛�
+- ROI璇勪及妯″瀷锛岄噺鍖栨敼杩涙帾鏂界殑璐㈠姟鏁堢泭`,
+ instructions: `鎮ㄥ彲浠ラ�氳繃浠ヤ笅鏂瑰紡涓庝緵搴旈摼鍏ㄦ櫙娲炲療绯荤粺浜掑姩锛�
+
+**鍦烘櫙涓�锛氭彃鍗曞奖鍝嶅垎鏋�**
+鎻愪緵鏂拌鍗曚俊鎭紝绯荤粺灏嗕粠鍥涗釜缁村害璇勪及鎻掑崟鍙鎬у拰褰卞搷銆�
+
+**鍦烘櫙浜岋細鐢熶骇璁″垝浼樺寲**
+鎻忚堪褰撳墠鐢熶骇鐘跺喌锛岃幏鍙栨櫤鑳戒紭鍖栧缓璁拰椋庨櫓棰勮銆�
+
+**鍦烘櫙涓夛細渚涘簲閾鹃闄╄瘎浼�**
+杈撳叆渚涘簲鍟嗘垨鍘熸潗鏂欎俊鎭紝鑾峰彇渚涘簲椋庨櫓鍒嗘瀽鍜屽簲瀵圭瓥鐣ャ��
+
+**鍦烘櫙鍥涳細鎴愭湰浼樺寲鍒嗘瀽**
+鎻愪緵鎴愭湰鐩稿叧鏁版嵁锛岃幏鍙栨垚鏈紭鍖栧缓璁拰璐㈠姟褰卞搷璇勪及銆�
+
+绯荤粺灏嗗熀浜庡疄鏃舵暟鎹拰AI绠楁硶锛屼负鎮ㄦ彁渚涗笓涓氱殑鍒嗘瀽鎶ュ憡鍜屽喅绛栧缓璁�俙,
+ dataDescription: '鏈満鏅暣鍚堜簡OMS銆丒RP銆乄MS绛夊涓郴缁熺殑瀹炴椂鏁版嵁锛岄�氳繃AI绠楁硶杩涜娣卞害鍒嗘瀽銆備互涓嬩负鏂拌兘婧愯涓氱殑妯℃嫙鏁版嵁锛屽疄闄呭簲鐢ㄤ腑灏嗚嚜鍔ㄥ鎺ヤ紒涓氱幇鏈夌郴缁熴��',
+ exampleData: `
+### 璁㈠崟闇�姹傛暟鎹� (OMS绯荤粺)
+
+| 璁㈠崟鍙� | 浜у搧鍨嬪彿 | 鏁伴噺 | 瀹㈡埛鍚嶇О | 棰勬湡浜や粯鏃ユ湡 | 浼樺厛绾� | 璁㈠崟閲戦 |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| SO20250201001 | NEV-Battery-A | 500 | 姣斾簹杩� | 2025-02-15 | 楂� | 2,500,000 |
+| SO20250201002 | NEV-Motor-B | 200 | 钄氭潵姹借溅 | 2025-02-20 | 涓� | 1,800,000 |
+| SO20250201003 | NEV-Controller-C | 300 | 鐞嗘兂姹借溅 | 2025-02-25 | 楂� | 3,200,000 |
+| SO20250201004 | NEV-Charger-D | 150 | 灏忛箯姹借溅 | 2025-03-01 | 涓� | 1,200,000 |
+
+### 鐢熶骇宸ュ崟鏁版嵁 (ERP绯荤粺)
+
+| 宸ュ崟鍙� | 浜у搧鍨嬪彿 | 璁″垝鏁伴噺 | 宸插畬鎴愭暟閲� | 鐢熶骇鐘舵�� | 棰勮瀹屾垚鏃堕棿 | 鐢熶骇绾� |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| WO20250201001 | NEV-Battery-A | 600 | 350 | 杩涜涓� | 2025-02-12 | 浜х嚎1 |
+| WO20250201002 | NEV-Motor-B | 250 | 180 | 杩涜涓� | 2025-02-18 | 浜х嚎2 |
+| WO20250201003 | NEV-Controller-C | 200 | 50 | 璁″垝涓� | 2025-02-22 | 浜х嚎3 |
+| WO20250201004 | NEV-Charger-D | 100 | 0 | 寰呮帓浜� | 2025-02-28 | 浜х嚎4 |
+
+### 搴撳瓨鏁版嵁 (WMS绯荤粺)
+
+| 鐗╂枡缂栫爜 | 鐗╂枡鍚嶇О | 褰撳墠搴撳瓨 | 瀹夊叏搴撳瓨 | 鍦ㄩ�旀暟閲� | 棰勮鍒拌揣鏃堕棿 | 搴撲綅 |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| MAT001 | 閿傜數姹犺姱 | 1,200 | 500 | 800 | 2025-02-10 | A鍖�-01 |
+| MAT002 | 鐢垫満瀹氬瓙 | 350 | 200 | 150 | 2025-02-12 | B鍖�-02 |
+| MAT003 | 鎺у埗鑺墖 | 180 | 100 | 200 | 2025-02-15 | C鍖�-03 |
+| MAT004 | 鍏呯數妯″潡 | 95 | 50 | 100 | 2025-02-18 | D鍖�-04 |
+
+### 渚涘簲鍟嗙哗鏁堟暟鎹�
+
+| 渚涘簲鍟嗗悕绉� | 渚涘簲鐗╂枡 | 鎸夋椂浜や粯鐜� | 璐ㄩ噺鍚堟牸鐜� | 浠锋牸绔炰簤鍔� | 椋庨櫓绛夌骇 |
+| :--: | :--: | :--: | :--: | :--: | :--: |
+| 瀹佸痉鏃朵唬 | 閿傜數姹犺姱 | 95% | 99.5% | 楂� | 浣� |
+| 姹囧窛鎶�鏈� | 鐢垫満瀹氬瓙 | 88% | 98.2% | 涓� | 涓� |
+| 鍦板钩绾� | 鎺у埗鑺墖 | 92% | 99.8% | 涓� | 浣� |
+| 鐗规潵鐢� | 鍏呯數妯″潡 | 85% | 97.5% | 楂� | 涓� |
+
+### 浜ц兘鏁版嵁
+
+| 鐢熶骇绾� | 鏃ヤ骇鑳� | 褰撳墠鍒╃敤鐜� | 鐡堕宸ュ簭 | 鍙皟閰嶄骇鑳� | 缁存姢璁″垝 |
+| :--: | :--: | :--: | :--: | :--: | :--: |
+| 浜х嚎1 | 50鍙� | 85% | 缁勮 | 10鍙� | 2025-02-20 |
+| 浜х嚎2 | 30鍙� | 75% | 娴嬭瘯 | 8鍙� | 2025-02-25 |
+| 浜х嚎3 | 40鍙� | 60% | 鐒婃帴 | 15鍙� | 2025-03-01 |
+| 浜х嚎4 | 25鍙� | 45% | 鍖呰 | 12鍙� | 2025-03-05 |
+`
+ },
];
export default function AISceneChatPage() {
+ return (
+ <Suspense fallback={<div>Loading...</div>}>
+ <AISceneChatContent />
+ </Suspense>
+ );
+}
+
+function AISceneChatContent() {
const searchParams = useSearchParams();
- const sceneId = searchParams.get('scene');
+ const sceneId = searchParams.get('scene') || searchParams.get('chatbotId');
const router = useRouter();
const [showDataPreview, setShowDataPreview] = useState(false);
// 鏍规嵁URL鍙傛暟鎵惧埌瀵瑰簲鐨勫満鏅�
const initialScene = defaultServices.find(s => s.chatbotId === sceneId) || defaultServices[0];
+
// 淇敼涓轰娇鐢ㄥ畬鏁寸殑鍦烘櫙鏁版嵁
- const [services] = useState([defaultServices.find(s => s.chatbotId === sceneId) || defaultServices[0]]);
+ const [services] = useState([initialScene]);
const [selectedScene, setSelectedScene] = useState(initialScene);
const [iframeKey, setIframeKey] = useState(0);
+ const [token, setToken] = useState<string | null>(null);
+
+ useEffect(() => {
+ // Get token from localStorage
+ const storedToken = localStorage.getItem('token');
+ setToken(storedToken);
+ }, []);
// 鍒囨崲鍦烘櫙鏃堕噸鏂板姞杞絠frame
const handleSceneChange = (scene: typeof services[0]) => {
@@ -308,9 +418,11 @@
)}
<div className="flex items-center relative z-10">
<div className="w-8 h-8 rounded-lg overflow-hidden mr-3 relative flex-shrink-0">
- <img
+ <Image
src={scene.imageUrl}
alt={scene.title}
+ width={32}
+ height={32}
className="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
@@ -375,8 +487,9 @@
{/* 鏁版嵁璇存槑 - 鍙湪琛ユ枡鍜屾彃鍗曞満鏅樉绀� */}
{(selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ||
- selectedScene.chatbotId === 'DfH4cIzujVGvn5iR' ||
- selectedScene.chatbotId === 'zO9YQDEHdIApG9zC') && (
+ selectedScene.chatbotId === 'RhMYLHI1SZNiX4kl' ||
+ selectedScene.chatbotId === 'zO9YQDEHdIApG9zC' ||
+ selectedScene.chatbotId === 'SCPanoramaInsight') && (
<>
<div className="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:border-gray-200 transition-colors duration-300 shadow-sm">
<div className="flex items-center justify-between mb-2">
@@ -405,7 +518,8 @@
isOpen={showDataPreview}
onClose={() => setShowDataPreview(false)}
markdownContent={selectedScene.exampleData || ''}
- sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' : 'chadan'}
+ sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' :
+ selectedScene.chatbotId === 'SCPanoramaInsight' ? 'panorama' : 'chadan'}
/>
</>
)}
@@ -423,24 +537,14 @@
</div>
{/* 鑱婂ぉ绐楀彛 */}
- <div className="flex-1 relative [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]">
- <AnimatePresence mode="wait">
- <motion.div
- key={iframeKey}
- className="absolute inset-0"
- initial={{ opacity: 0, scale: 0.98 }}
- animate={{ opacity: 1, scale: 1 }}
- exit={{ opacity: 0, scale: 1.02 }}
- transition={{ duration: 0.3 }}
- >
- <iframe
- src={`http://121.43.139.99/chatbot/${selectedScene.chatbotId}`}
- className="w-full h-full"
- style={{ border: 'none' }}
- allow="microphone"
- />
- </motion.div>
- </AnimatePresence>
+ <div className="flex-1 relative">
+ <iframe
+ key={iframeKey}
+ className="w-full h-full rounded-lg"
+ src={`http://121.43.139.99:7000/chatbot/${selectedScene.chatbotId}${token ? `?token=${token}` : ''}`}
+ frameBorder="0"
+ allow="microphone"
+ ></iframe>
</div>
</div>
</div>
--
Gitblit v1.9.3