From 603944bff3fa6a0541235ed0ab39ef9ba986e648 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 07 四月 2025 16:38:01 +0800
Subject: [PATCH] 场景页面优化
---
package-lock.json | 212 ++++++++++++++++++++++++++++++
src/components/SceneIntroDialog.tsx | 124 +++++++++++++++++
package.json | 1
src/app/ai-scene/page.tsx | 43 ++++-
4 files changed, 370 insertions(+), 10 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 32ee5cf..98d5d85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "weiwojunchen",
"version": "0.1.0",
"dependencies": {
+ "@headlessui/react": "^2.2.1",
"@types/styled-components": "^5.1.34",
"axios": "^1.8.4",
"framer-motion": "^12.6.0",
@@ -231,6 +232,78 @@
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+ }
+ },
+ "node_modules/@floating-ui/core": {
+ "version": "1.6.9",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+ "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/utils": "^0.2.9"
+ }
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "1.6.13",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+ "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/core": "^1.6.0",
+ "@floating-ui/utils": "^0.2.9"
+ }
+ },
+ "node_modules/@floating-ui/react": {
+ "version": "0.26.28",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+ "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.1.2",
+ "@floating-ui/utils": "^0.2.8",
+ "tabbable": "^6.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/react-dom": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+ "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/dom": "^1.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/utils": {
+ "version": "0.2.9",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+ "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+ "license": "MIT"
+ },
+ "node_modules/@headlessui/react": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.1.tgz",
+ "integrity": "sha512-daiUqVLae8CKVjEVT19P/izW0aGK0GNhMSAeMlrDebKmoVZHcRRwbxzgtnEadUVDXyBsWo9/UH4KHeniO+0tMg==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/react": "^0.26.16",
+ "@react-aria/focus": "^3.17.1",
+ "@react-aria/interactions": "^3.21.3",
+ "@tanstack/react-virtual": "^3.11.1"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": "^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/@humanfs/core": {
@@ -865,6 +938,103 @@
"node": ">=12.4.0"
}
},
+ "node_modules/@react-aria/focus": {
+ "version": "3.20.1",
+ "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.1.tgz",
+ "integrity": "sha512-lgYs+sQ1TtBrAXnAdRBQrBo0/7o5H6IrfDxec1j+VRpcXL0xyk0xPq+m3lZp8typzIghqDgpnKkJ5Jf4OrzPIw==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@react-aria/interactions": "^3.24.1",
+ "@react-aria/utils": "^3.28.1",
+ "@react-types/shared": "^3.28.0",
+ "@swc/helpers": "^0.5.0",
+ "clsx": "^2.0.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
+ "node_modules/@react-aria/interactions": {
+ "version": "3.24.1",
+ "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.24.1.tgz",
+ "integrity": "sha512-OWEcIC6UQfWq4Td5Ptuh4PZQ4LHLJr/JL2jGYvuNL6EgL3bWvzPrRYIF/R64YbfVxIC7FeZpPSkS07sZ93/NoA==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@react-aria/ssr": "^3.9.7",
+ "@react-aria/utils": "^3.28.1",
+ "@react-stately/flags": "^3.1.0",
+ "@react-types/shared": "^3.28.0",
+ "@swc/helpers": "^0.5.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
+ "node_modules/@react-aria/ssr": {
+ "version": "3.9.7",
+ "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+ "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@swc/helpers": "^0.5.0"
+ },
+ "engines": {
+ "node": ">= 12"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
+ "node_modules/@react-aria/utils": {
+ "version": "3.28.1",
+ "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.28.1.tgz",
+ "integrity": "sha512-mnHFF4YOVu9BRFQ1SZSKfPhg3z+lBRYoW5mLcYTQihbKhz48+I1sqRkP7ahMITr8ANH3nb34YaMME4XWmK2Mgg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@react-aria/ssr": "^3.9.7",
+ "@react-stately/flags": "^3.1.0",
+ "@react-stately/utils": "^3.10.5",
+ "@react-types/shared": "^3.28.0",
+ "@swc/helpers": "^0.5.0",
+ "clsx": "^2.0.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
+ "node_modules/@react-stately/flags": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.0.tgz",
+ "integrity": "sha512-KSHOCxTFpBtxhIRcKwsD1YDTaNxFtCYuAUb0KEihc16QwqZViq4hasgPBs2gYm7fHRbw7WYzWKf6ZSo/+YsFlg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@swc/helpers": "^0.5.0"
+ }
+ },
+ "node_modules/@react-stately/utils": {
+ "version": "3.10.5",
+ "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
+ "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@swc/helpers": "^0.5.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
+ "node_modules/@react-types/shared": {
+ "version": "3.28.0",
+ "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.28.0.tgz",
+ "integrity": "sha512-9oMEYIDc3sk0G5rysnYvdNrkSg7B04yTKl50HHSZVbokeHpnU0yRmsDaWb9B/5RprcKj8XszEk5guBO8Sa/Q+Q==",
+ "license": "Apache-2.0",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ }
+ },
"node_modules/@rtsao/scc": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1129,6 +1299,33 @@
"lightningcss": "1.29.2",
"postcss": "^8.4.41",
"tailwindcss": "4.0.16"
+ }
+ },
+ "node_modules/@tanstack/react-virtual": {
+ "version": "3.13.6",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.6.tgz",
+ "integrity": "sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==",
+ "license": "MIT",
+ "dependencies": {
+ "@tanstack/virtual-core": "3.13.6"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "node_modules/@tanstack/virtual-core": {
+ "version": "3.13.6",
+ "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.6.tgz",
+ "integrity": "sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tybys/wasm-util": {
@@ -2065,6 +2262,15 @@
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
+ },
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
},
"node_modules/color": {
"version": "4.2.3",
@@ -5612,6 +5818,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+ "license": "MIT"
+ },
"node_modules/tailwindcss": {
"version": "4.0.16",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.16.tgz",
diff --git a/package.json b/package.json
index f61e761..31ad966 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "@headlessui/react": "^2.2.1",
"@types/styled-components": "^5.1.34",
"axios": "^1.8.4",
"framer-motion": "^12.6.0",
diff --git a/src/app/ai-scene/page.tsx b/src/app/ai-scene/page.tsx
index eded6af..c65dcbd 100644
--- a/src/app/ai-scene/page.tsx
+++ b/src/app/ai-scene/page.tsx
@@ -3,6 +3,7 @@
import { useState } from 'react';
import Card from '@/components/Card';
import ChatDialog from '@/components/ChatDialog';
+import SceneIntroDialog from '@/components/SceneIntroDialog';
import Navbar from '@/components/layout/Navbar';
const services = [
@@ -10,37 +11,51 @@
title: '琛ユ枡',
description: '鏅鸿兘鍔ㄦ�佸垎鏋愪骇绾匡紝宸ヤ綅鐨勭己鏂欐儏鍐碉紝闄嶄綆鍋滅嚎椋庨櫓',
imageUrl: '/images/kanban.jpg',
- chatbotId: 'JELkWpPLHQfRNhEH'
+ chatbotId: 'JELkWpPLHQfRNhEH',
+ background: '鍦ㄧ敓浜х嚎杩愯杩囩▼涓紝鍙婃椂鍙戠幇骞惰В鍐崇己鏂欓棶棰樻槸淇濊瘉鐢熶骇鏁堢巼鐨勫叧閿�侫I绯荤粺閫氳繃瀹炴椂鐩戞帶鍜屽垎鏋愶紝甯姪鎮ㄦ彁鍓嶉璀﹀彲鑳界殑缂烘枡椋庨櫓锛屼紭鍖栬ˉ鏂欒鍒掋��',
+ instructions: '鎮ㄥ彲浠ユ弿杩板叿浣撶殑鐢熶骇绾挎儏鍐靛拰缂烘枡闂锛孉I鍔╂墜灏嗗熀浜庡巻鍙叉暟鎹拰瀹炴椂鐘舵�侊紝涓烘偍鎻愪緵鏈�浼樼殑琛ユ枡鏂规鍜屽缓璁��'
},
{
title: '鎻掑崟',
description: '鏅鸿兘璇勪及闇�姹傛彃鍗曞浜ц兘锛屽師鏉愭枡鍜屼氦浠樻湇鍔＄殑褰卞搷锛屾彁鍗囧鎴锋弧鎰忓害',
imageUrl: '/images/xuqiu.jpg',
- chatbotId: 'DfH4cIzujVGvn5iR'
+ chatbotId: 'DfH4cIzujVGvn5iR',
+ background: '鍦ㄧ敓浜ц鍒掓墽琛岃繃绋嬩腑锛屽父甯镐細閬囧埌绱ф�ヨ鍗曢渶瑕佹彃鍗曠殑鎯呭喌銆侫I绯荤粺鍙互蹇�熻瘎浼版彃鍗曞鐜版湁鐢熶骇璁″垝鐨勫奖鍝嶏紝骞舵彁渚涙渶浼樼殑鎻掑崟鏂规銆�',
+ instructions: '璇锋彁渚涢渶瑕佹彃鍗曠殑璁㈠崟淇℃伅锛屽寘鎷骇鍝佺被鍨嬨�佹暟閲忓拰鏈熸湜浜や粯鏃堕棿锛孉I鍔╂墜灏嗕负鎮ㄥ垎鏋愬彲琛屾�у苟缁欏嚭鍏蜂綋鐨勬彃鍗曞缓璁��'
},
{
title: '绉戞矁鏂攢鍞帹鑽愬皬鍔╂墜',
description: '鏅鸿兘鍖栦骇鍝佹帹鑽愭彁鍗囧璐晥鐜�',
imageUrl: '/images/robot.jpg',
- chatbotId: 'sUAviPXvcEIw3oQC'
+ chatbotId: 'sUAviPXvcEIw3oQC',
+ background: '闈㈠涓嶅悓瀹㈡埛鐨勪釜鎬у寲闇�姹傦紝濡備綍鍑嗙‘鎺ㄨ崘鍚堥�傜殑浜у搧鏄彁鍗囬攢鍞晥鐜囩殑鍏抽敭銆侫I鍔╂墜鍩轰簬娣卞害瀛︿範绠楁硶锛岃兘澶熺簿鍑嗗垎鏋愬鎴烽渶姹傦紝鎻愪緵涓�у寲鐨勪骇鍝佹帹鑽愩��',
+ instructions: '鎮ㄥ彲浠ユ弿杩板鎴风殑鍏蜂綋闇�姹傚拰鍋忓ソ锛孉I鍔╂墜灏嗘牴鎹繖浜涗俊鎭紝涓烘偍鎺ㄨ崘鏈�閫傚悎鐨勭娌冩柉浜у搧锛屽苟鎻愪緵涓撲笟鐨勪骇鍝佷粙缁嶅拰閿�鍞缓璁��'
},
{
title: '搴撳瓨绠＄悊鐭ヨ瘑搴撻棶绛�',
description: '搴撳瓨鐭ヨ瘑锛屾彁渚涗笓涓氱殑渚涘簲閾惧簱瀛樼煡璇嗛棶绛�',
imageUrl: '/images/know.jpg',
- chatbotId: 'pDDfkU9HyBl2gzXx'
+ chatbotId: 'pDDfkU9HyBl2gzXx',
+ background: '楂樻晥鐨勫簱瀛樼鐞嗛渶瑕佷赴瀵岀殑涓撲笟鐭ヨ瘑鍜岀粡楠屻�侫I鐭ヨ瘑搴撴暣鍚堜簡澶ч噺渚涘簲閾惧拰搴撳瓨绠＄悊鐨勪笓涓氱煡璇嗭紝鍙互蹇�熻В绛斿悇绫诲簱瀛樼鐞嗛棶棰樸��',
+ instructions: '鎮ㄥ彲浠ヨ闂换浣曚笌搴撳瓨绠＄悊鐩稿叧鐨勯棶棰橈紝鍖呮嫭搴撳瓨绛栫暐銆佹垚鏈帶鍒躲�佸懆杞巼浼樺寲绛夛紝AI鍔╂墜灏嗕负鎮ㄦ彁渚涗笓涓氱殑瑙ｇ瓟鍜屽缓璁��'
},
];
export default function AIScenePage() {
const [isChatOpen, setIsChatOpen] = useState(false);
+ const [isIntroOpen, setIsIntroOpen] = useState(false);
const [currentChatbot, setCurrentChatbot] = useState('');
+ const [selectedScene, setSelectedScene] = useState(services[0]);
- const handleCardClick = (title: string, chatbotId?: string) => {
- if (chatbotId) {
- setCurrentChatbot(chatbotId);
- setIsChatOpen(true);
- }
+ const handleCardClick = (service: typeof services[0]) => {
+ setSelectedScene(service);
+ setIsIntroOpen(true);
+ };
+
+ const handleStartChat = () => {
+ setIsIntroOpen(false);
+ setCurrentChatbot(selectedScene.chatbotId);
+ setIsChatOpen(true);
};
return (
@@ -62,12 +77,20 @@
<Card
key={index}
{...service}
- onClick={() => handleCardClick(service.title, service.chatbotId)}
+ onClick={() => handleCardClick(service)}
/>
))}
</div>
</div>
</div>
+
+ <SceneIntroDialog
+ isOpen={isIntroOpen}
+ onClose={() => setIsIntroOpen(false)}
+ onStartChat={handleStartChat}
+ scene={selectedScene}
+ />
+
<ChatDialog
isOpen={isChatOpen}
onClose={() => setIsChatOpen(false)}
diff --git a/src/components/SceneIntroDialog.tsx b/src/components/SceneIntroDialog.tsx
new file mode 100644
index 0000000..3217c52
--- /dev/null
+++ b/src/components/SceneIntroDialog.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+
+interface SceneIntroDialogProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onStartChat: () => void;
+ scene: {
+ title: string;
+ description: string;
+ imageUrl: string;
+ background?: string;
+ instructions?: string;
+ };
+}
+
+export default function SceneIntroDialog({
+ isOpen,
+ onClose,
+ onStartChat,
+ scene
+}: SceneIntroDialogProps) {
+ return (
+ <Transition appear show={isOpen} as={Fragment}>
+ <Dialog as="div" className="relative z-50" onClose={onClose}>
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-out duration-200"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <div className="fixed inset-0 bg-black/70" />
+ </Transition.Child>
+
+ <div className="fixed inset-0 overflow-y-auto">
+ <div className="flex min-h-full items-center justify-center p-4">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0 scale-95"
+ enterTo="opacity-100 scale-100"
+ leave="ease-out duration-200"
+ leaveFrom="opacity-100 scale-100"
+ leaveTo="opacity-0 scale-95"
+ >
+ <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-gradient-to-br from-[#1E2B63] to-[#0A1033] p-6 shadow-xl transition-all">
+ {/* 绉戞妧鎰熻儗鏅晥鏋� */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none">
+ <div className="absolute inset-0 opacity-10"
+ style={{
+ backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)',
+ backgroundSize: '20px 20px'
+ }}>
+ </div>
+ <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
+ <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
+ </div>
+
+ <div className="relative">
+ {/* 鏍囬 */}
+ <Dialog.Title className="text-2xl font-bold text-white mb-4">
+ <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
+ {scene.title}
+ </span>
+ </Dialog.Title>
+
+ {/* 鍦烘櫙鍥剧墖 */}
+ <div className="relative h-48 mb-6 rounded-lg overflow-hidden">
+ <img
+ src={scene.imageUrl}
+ alt={scene.title}
+ className="w-full h-full object-cover"
+ />
+ <div className="absolute inset-0 bg-gradient-to-t from-[#0A1033]/80 to-transparent"></div>
+ </div>
+
+ {/* 鍦烘櫙鑳屾櫙 */}
+ <div className="mb-6">
+ <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2">鍦烘櫙鑳屾櫙</h3>
+ <p className="text-gray-300 leading-relaxed">
+ {scene.background || scene.description}
+ </p>
+ </div>
+
+ {/* 浣跨敤璇存槑 */}
+ <div className="mb-8">
+ <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2">浣跨敤璇存槑</h3>
+ <p className="text-gray-300 leading-relaxed">
+ {scene.instructions || '閫氳繃鑷劧璇█瀵硅瘽鐨勬柟寮忥紝鎻忚堪鎮ㄧ殑鍏蜂綋闇�姹傦紝AI鍔╂墜灏嗕负鎮ㄦ彁渚涗笓涓氱殑瑙ｅ喅鏂规銆�'}
+ </p>
+ </div>
+
+ {/* 鎸夐挳缁� */}
+ <div className="flex justify-end gap-4">
+ <button
+ onClick={onClose}
+ className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors"
+ >
+ 鍏抽棴
+ </button>
+ <button
+ onClick={onStartChat}
+ className="relative px-6 py-2 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#6ADBFF]/30 hover:border-[#6ADBFF]/50 transition-all duration-300"
+ >
+ <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 group-hover:from-[#6ADBFF]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
+ <span className="relative text-white group-hover:text-[#6ADBFF] transition-colors duration-300">
+ 寮�濮嬩娇鐢�
+ </span>
+ </button>
+ </div>
+ </div>
+ </Dialog.Panel>
+ </Transition.Child>
+ </div>
+ </div>
+ </Dialog>
+ </Transition>
+ );
+}
\ No newline at end of file
--
Gitblit v1.9.3