From 90b3b6329fec3205b845198ca6dc539dcde186c8 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 16 六月 2025 17:12:20 +0800
Subject: [PATCH] 页面调整优化
---
src/app/supply-chain-chat/page.tsx | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 227 insertions(+), 4 deletions(-)
diff --git a/src/app/supply-chain-chat/page.tsx b/src/app/supply-chain-chat/page.tsx
index 567c1b6..c9ee867 100644
--- a/src/app/supply-chain-chat/page.tsx
+++ b/src/app/supply-chain-chat/page.tsx
@@ -1,6 +1,6 @@
'use client';
-import { useState, useEffect, useRef, useCallback, useContext, createContext } from 'react';
+import { useState, useEffect, useRef, useCallback, useContext, createContext, Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import Image from 'next/image';
@@ -10,6 +10,7 @@
import rehypeSanitize from 'rehype-sanitize';
import dynamic from 'next/dynamic';
import { ReactNode } from 'react';
+import DataPreviewDialog from '@/components/DataPreviewDialog';
// 鍒涘缓涓�涓秷鎭畬鎴愮姸鎬佺殑Context
const MessageCompletionContext = createContext<boolean>(true);
@@ -35,6 +36,101 @@
}
const BASE_URL = 'http://121.43.139.99:7000';
+
+// 渚涘簲閾惧叏鏅礊瀵熷満鏅暟鎹�
+const SUPPLY_CHAIN_SCENE = {
+ title: '渚涘簲閾惧叏鏅礊瀵�',
+ description: '閫氳繃AI Agent涓嶢PS鐨勬繁搴﹀崗鍚岋紝灏嗘彃鍗曞搷搴斾粠"琚姩鏁戠伀"鍗囩骇涓�"棰勬祴-鍐崇瓥-鎵ц"涓変綅涓�浣撶殑鏅鸿兘杩愯惀妯″紡锛屽姪鍔涙柊鑳芥簮涓氬姟澧為暱銆�',
+ imageUrl: '/images/333.png',
+ chatbotId: 'SCPanoramaInsight',
+ background: `渚涘簲閾惧叏鏅礊瀵熺郴缁熸槸鏂颁竴浠ｆ櫤鑳戒緵搴旈摼绠＄悊骞冲彴鐨勬牳蹇冨紩鎿庛�傝AI绯荤粺鑳藉瑙ｅ喅浼犵粺渚涘簲閾剧鐞嗕腑鐨勫洓澶у叧閿棶棰橈細
+
+**鐢熶骇璁″垝涓庝骇鑳藉奖鍝嶈瘎浼帮細**
+- 瀹炴椂鐩戞帶鐢熶骇绾跨姸鎬侊紝鍔ㄦ�佽瘎浼颁骇鑳藉埄鐢ㄧ巼
+- 鍩轰簬鍘嗗彶鏁版嵁鍜屽疄鏃惰鍗曪紝鏅鸿兘棰勬祴鐢熶骇鐡堕
+- 鑷姩璋冩暣鐢熶骇璁″垝锛屾渶澶у寲浜ц兘鍒╃敤鏁堢巼
+- 鎻愪緵澶氬満鏅敓浜ц鍒掑姣斿垎鏋愶紝杈呭姪鍐崇瓥鍒跺畾
+
+**渚涘簲鍗忓悓鑳藉姏璇勪及锛�**
+- 瀹炴椂杩借釜渚涘簲鍟嗕氦浠樼姸鎬侊紝璇勪及渚涘簲椋庨櫓
+- 鏅鸿兘鍒嗘瀽渚涘簲鍟嗙哗鏁堬紝鎻愪緵渚涘簲鍟嗕紭鍖栧缓璁�
+- 棰勬祴鍘熸潗鏂欓渶姹傦紝鎻愬墠鍚姩閲囪喘娴佺▼
+- 鏋勫缓渚涘簲閾剧綉缁滈煣鎬фā鍨嬶紝鎻愬崌鎶楅闄╄兘鍔�
+
+**浜や粯灞ョ害椋庨櫓璇勪及锛�**
+- 鍩轰簬璁㈠崟銆佸簱瀛樸�佺敓浜ц繘搴﹁繘琛岀患鍚堥闄╄瘎浼�
+- 鎻愬墠璇嗗埆娼滃湪寤舵湡椋庨櫓锛屽埗瀹氬簲瀵归妗�
+- 瀹炴椂璺熻釜浜や粯杩涘害锛岀‘淇濆鎴锋弧鎰忓害
+- 寤虹珛瀹㈡埛棰勬湡绠＄悊鏈哄埗锛屾彁鍗囨湇鍔′綋楠�
+
+**鎴愭湰涓庤储鍔″奖鍝嶈瘎浼帮細**
+- 鍏ㄩ摼璺垚鏈拷韪紝绮剧‘璁＄畻鍚勭幆鑺傛垚鏈瀯鎴�
+- 鍔ㄦ�佹垚鏈紭鍖栧缓璁紝闄嶄綆鏁翠綋杩愯惀鎴愭湰
+- 璐㈠姟褰卞搷棰勬祴鍒嗘瀽锛屾敮鎸佸晢涓氬喅绛�
+- ROI璇勪及妯″瀷锛岄噺鍖栨敼杩涙帾鏂界殑璐㈠姟鏁堢泭`,
+ instructions: `鎮ㄥ彲浠ラ�氳繃浠ヤ笅鏂瑰紡涓庝緵搴旈摼鍏ㄦ櫙娲炲療绯荤粺浜掑姩锛�
+
+**鍦烘櫙涓�锛氭彃鍗曞奖鍝嶅垎鏋�**
+鎻愪緵鏂拌鍗曚俊鎭紝绯荤粺灏嗕粠鍥涗釜缁村害璇勪及鎻掑崟鍙鎬у拰褰卞搷銆�
+
+**鍦烘櫙浜岋細鐢熶骇璁″垝浼樺寲**
+鎻忚堪褰撳墠鐢熶骇鐘跺喌锛岃幏鍙栨櫤鑳戒紭鍖栧缓璁拰椋庨櫓棰勮銆�
+
+**鍦烘櫙涓夛細渚涘簲閾鹃闄╄瘎浼�**
+杈撳叆渚涘簲鍟嗘垨鍘熸潗鏂欎俊鎭紝鑾峰彇渚涘簲椋庨櫓鍒嗘瀽鍜屽簲瀵圭瓥鐣ャ��
+
+**鍦烘櫙鍥涳細鎴愭湰浼樺寲鍒嗘瀽**
+鎻愪緵鎴愭湰鐩稿叧鏁版嵁锛岃幏鍙栨垚鏈紭鍖栧缓璁拰璐㈠姟褰卞搷璇勪及銆�
+
+绯荤粺灏嗗熀浜庡疄鏃舵暟鎹拰AI绠楁硶锛屼负鎮ㄦ彁渚涗笓涓氱殑鍒嗘瀽鎶ュ憡鍜屽喅绛栧缓璁�俙,
+ dataDescription: '鏈満鏅暣鍚堜簡OMS銆乄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 |
+
+### 搴撳瓨鏁版嵁 (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% | 楂� | 涓� |
+
+### 鐢熶骇璁″垝鏁版嵁
+
+| 璁″垝鍗旾D | 璁″垝鍗曞彿 | 鏂欏彿 | 璁″垝鏁伴噺 | 璁″垝寮�濮嬫棩鏈� | 璁″垝缁撴潫鏃ユ湡 |
+| :--: | :--: | :--: | :--: | :--: | :--: |
+| PP001 | PLAN20250201001 | TX-001 | 1000.00 | 2025-02-01 | 2025-02-15 |
+| PP002 | PLAN20250201002 | TX-002 | 500.00 | 2025-02-05 | 2025-02-20 |
+| PP003 | PLAN20250201003 | TX-003 | 750.00 | 2025-02-10 | 2025-02-25 |
+| PP004 | PLAN20250201004 | TX-004 | 300.00 | 2025-02-15 | 2025-03-01 |
+
+### 鐗╂枡涓绘暟鎹�
+
+| 宸ュ巶浠ｇ爜 | 鏂欏彿 | 鐗╂枡鎻忚堪 | 鐗╂枡鐘舵�� | 鐗╂枡妯″瀷 | 涓撲笟褰掑睘鍥惧彿 | 鐗堟湰 | 榛樿鐢熶骇杞﹂棿 | 鏄惁鍏抽敭鐗╂枡 | 鏄惁鑷埗 | 闆嗘垚鏃ユ湡 | 鐢熸晥鏃ユ湡 | 澶辨晥鏃ユ湡 |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| PLANT001 | TX-001 | 鍙橀�熺澹充綋 | Active | 鏍囧噯浠� | 鏈烘 | v1.0 | 杞﹂棿A | 1 | 1 | 2025-01-01 00:00:00 | 2025-01-01 | 2025-12-31 |
+| PLANT001 | TX-002 | 鐢垫満瀹氬瓙 | Active | 瀹氬埗浠� | 鐢垫皵 | v2.0 | 杞﹂棿B | 1 | 0 | 2025-01-02 00:00:00 | 2025-01-02 | 2025-12-31 |
+| PLANT002 | TX-003 | 鎺у埗鑺墖 | Active | 鏍囧噯浠� | 鐢靛瓙 | v1.5 | 杞﹂棿C | 0 | 0 | 2025-01-03 00:00:00 | 2025-01-03 | 2025-12-31 |
+| PLANT002 | TX-004 | 鍏呯數妯″潡 | Active | 瀹氬埗浠� | 鐢垫皵 | v2.5 | 杞﹂棿D | 1 | 1 | 2025-01-04 00:00:00 | 2025-01-04 | 2025-12-31 |
+`
+};
// 榛樿鐢ㄦ埛澶村儚
const DEFAULT_USER_AVATAR = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E";
@@ -396,7 +492,8 @@
);
}
-export default function SupplyChainChatPage() {
+// 鍒涘缓涓�涓嫭绔嬬殑缁勪欢鏉ュ鐞唘seSearchParams
+function SupplyChainChatContent() {
const router = useRouter();
const searchParams = useSearchParams();
const [apiKey, setApiKey] = useState<string>('');
@@ -420,6 +517,11 @@
// 娣诲姞API瀵嗛挜鍔犺浇鐘舵��
const [isLoadingApiKey, setIsLoadingApiKey] = useState(false);
+
+ // 娣诲姞璇存槑瀵硅瘽妗嗙姸鎬�
+ const [showDataPreview, setShowDataPreview] = useState(false);
+ const [showSceneBackground, setShowSceneBackground] = useState(false);
+ const [showInstructions, setShowInstructions] = useState(false);
// 鑾峰彇URL鍙傛暟
const keyParam = searchParams.get('key');
@@ -986,6 +1088,31 @@
</h1>
</div>
<div className="flex items-center space-x-4">
+ {/* 璇存槑鎸夐挳缁� */}
+ <div className="flex items-center space-x-2">
+ <button
+ onClick={() => setShowSceneBackground(true)}
+ className="px-3 py-1.5 text-xs text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-300 border border-gray-200 hover:border-blue-200 cursor-pointer"
+ title="鏌ョ湅鍦烘櫙鑳屾櫙"
+ >
+ 鍦烘櫙鑳屾櫙
+ </button>
+ <button
+ onClick={() => setShowInstructions(true)}
+ className="px-3 py-1.5 text-xs text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-300 border border-gray-200 hover:border-blue-200 cursor-pointer"
+ title="鏌ョ湅浣跨敤璇存槑"
+ >
+ 浣跨敤璇存槑
+ </button>
+ <button
+ onClick={() => setShowDataPreview(true)}
+ className="px-3 py-1.5 text-xs text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-300 border border-gray-200 hover:border-blue-200 cursor-pointer"
+ title="鏌ョ湅鏁版嵁璇存槑"
+ >
+ 鏁版嵁璇存槑
+ </button>
+ </div>
+ <div className="h-4 w-px bg-gray-200"></div>
<div className="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full">
AI鏅鸿兘鍒嗘瀽
</div>
@@ -1029,12 +1156,12 @@
<div className="flex flex-col items-center justify-center h-[400px] text-center">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2h2a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">渚涘簲閾惧叏鏅礊瀵�</h3>
<p className="text-gray-500 max-w-md">
- 娆㈣繋浣跨敤渚涘簲閾惧叏鏅礊瀵熺郴缁燂紒鎮ㄥ彲浠ュ挩璇㈡彃鍗曞奖鍝嶅垎鏋愩�佺敓浜ц鍒掍紭鍖栥�佷緵搴旈摼椋庨櫓璇勪及绛夐棶棰樸��
+ 娆㈣繋浣跨敤渚涘簲閾惧叏鏅礊瀵熺郴缁燂紒鎮ㄥ彲浠ュ挩璇㈢敓浜ц鍒掍笌浜ц兘褰卞搷銆佷緵搴斿崗鍚岃兘鍔涖�佷氦浠樺饱绾﹂闄┿�佹垚鏈笌璐㈠姟褰卞搷銆佷緵搴旈摼鏁版嵁鏌ヨ銆佷緵搴旈摼鐭ヨ瘑鍜ㄨ绛夐棶棰樸��
</p>
</div>
) : (
@@ -1202,6 +1329,102 @@
isMessageComplete={isMessageComplete}
/>
</div>
+
+ {/* 鍦烘櫙鑳屾櫙瀵硅瘽妗� */}
+ {showSceneBackground && (
+ <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+ <div className="bg-white rounded-2xl w-full max-w-4xl max-h-[80vh] overflow-hidden shadow-xl">
+ <div className="flex justify-between items-center p-6 border-b border-gray-200">
+ <div className="flex items-center gap-3">
+ <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+ </svg>
+ </div>
+ <h2 className="text-xl font-semibold text-gray-900">鍦烘櫙鑳屾櫙</h2>
+ </div>
+ <button
+ onClick={() => setShowSceneBackground(false)}
+ className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors cursor-pointer"
+ >
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div className="p-6 overflow-y-auto max-h-[60vh]">
+ <div className="prose prose-sm max-w-none">
+ <ReactMarkdown
+ remarkPlugins={[remarkGfm]}
+ rehypePlugins={[rehypeRaw, rehypeSanitize]}
+ >
+ {SUPPLY_CHAIN_SCENE.background}
+ </ReactMarkdown>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+
+ {/* 浣跨敤璇存槑瀵硅瘽妗� */}
+ {showInstructions && (
+ <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+ <div className="bg-white rounded-2xl w-full max-w-4xl max-h-[80vh] overflow-hidden shadow-xl">
+ <div className="flex justify-between items-center p-6 border-b border-gray-200">
+ <div className="flex items-center gap-3">
+ <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+ </svg>
+ </div>
+ <h2 className="text-xl font-semibold text-gray-900">浣跨敤璇存槑</h2>
+ </div>
+ <button
+ onClick={() => setShowInstructions(false)}
+ className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors cursor-pointer"
+ >
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div className="p-6 overflow-y-auto max-h-[60vh]">
+ <div className="prose prose-sm max-w-none">
+ <ReactMarkdown
+ remarkPlugins={[remarkGfm]}
+ rehypePlugins={[rehypeRaw, rehypeSanitize]}
+ >
+ {SUPPLY_CHAIN_SCENE.instructions}
+ </ReactMarkdown>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+
+ {/* 鏁版嵁璇存槑瀵硅瘽妗� */}
+ <DataPreviewDialog
+ isOpen={showDataPreview}
+ onClose={() => setShowDataPreview(false)}
+ markdownContent={SUPPLY_CHAIN_SCENE.exampleData}
+ sceneType="panorama"
+ />
</div>
);
+}
+
+// 涓诲鍑虹粍浠讹紝浣跨敤Suspense鍖呰鍘熸湁缁勪欢
+export default function SupplyChainChatPage() {
+ return (
+ <Suspense fallback={
+ <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white flex items-center justify-center">
+ <div className="text-center">
+ <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+ <p className="text-gray-600">姝ｅ湪鍔犺浇...</p>
+ </div>
+ </div>
+ }>
+ <SupplyChainChatContent />
+ </Suspense>
+ );
}
\ No newline at end of file
--
Gitblit v1.9.3