From 7c75be06b084a57193d9915c6197294049a365c5 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 05 六月 2025 13:40:44 +0800
Subject: [PATCH] 页面调整优化
---
src/app/supply-chain-chat/page.tsx | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 206 insertions(+), 0 deletions(-)
diff --git a/src/app/supply-chain-chat/page.tsx b/src/app/supply-chain-chat/page.tsx
index 567c1b6..5b1a046 100644
--- a/src/app/supply-chain-chat/page.tsx
+++ b/src/app/supply-chain-chat/page.tsx
@@ -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銆丒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 |
+`
+};
// 榛樿鐢ㄦ埛澶村儚
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";
@@ -420,6 +516,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 +1087,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>
@@ -1202,6 +1328,86 @@
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>
);
}
\ No newline at end of file
--
Gitblit v1.9.3