89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
// 引入各区域组件
|
|
import PresetPanel from './components/PresetPanel';
|
|
import ChatBox from './components/ChatBox';
|
|
import ImageDisplay from './components/ImageDisplay';
|
|
import DicePanel from './components/DicePanel';
|
|
import RoleSelector from './components/RoleSelector';
|
|
|
|
function App() {
|
|
const [isToolbarExpanded, setIsToolbarExpanded] = useState(false);
|
|
const [selectedRole, setSelectedRole] = useState(null);
|
|
const [selectedChat, setSelectedChat] = useState(null);
|
|
|
|
const toggleToolbar = () => {
|
|
setIsToolbarExpanded(!isToolbarExpanded);
|
|
};
|
|
|
|
// 处理角色选择变化
|
|
const handleRoleChange = (role) => {
|
|
setSelectedRole(role);
|
|
console.log('选择的角色:', role);
|
|
// 这里可以添加其他逻辑，比如加载角色的聊天记录等
|
|
};
|
|
|
|
// 处理聊天选择变化
|
|
const handleChatChange = (role, chat) => {
|
|
setSelectedChat(chat);
|
|
console.log('选择的聊天:', role, chat);
|
|
// 这里可以添加其他逻辑，比如加载聊天内容等
|
|
};
|
|
|
|
return (
|
|
<div className="app-container">
|
|
{/* 顶部工具栏 */}
|
|
<header className={`toolbar ${isToolbarExpanded ? 'expanded' : ''}`}>
|
|
{/* 工具栏内容区域 */}
|
|
{isToolbarExpanded && (
|
|
<div className="toolbar-content">
|
|
{/* 角色选择器 */}
|
|
<RoleSelector
|
|
onRoleChange={handleRoleChange}
|
|
onChatChange={handleChatChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 工具栏切换按钮 */}
|
|
<button
|
|
className={`toolbar-toggle-btn ${isToolbarExpanded ? 'expanded' : ''}`}
|
|
onClick={toggleToolbar}
|
|
aria-label="Toggle Toolbar"
|
|
>
|
|
{isToolbarExpanded ? '▼' : '▲'}
|
|
</button>
|
|
</header>
|
|
|
|
{/* 主体内容区域 */}
|
|
<main className="main-container">
|
|
|
|
{/* 左侧：预设栏 (仿AI酒馆) */}
|
|
<section className="sidebar-left">
|
|
<PresetPanel />
|
|
</section>
|
|
|
|
{/* 中间：历史对话框 + 输入框 */}
|
|
<section className="chat-area">
|
|
<ChatBox />
|
|
</section>
|
|
|
|
{/* 右侧：上下布局 */}
|
|
<section className="sidebar-right">
|
|
{/* 上方：图片展示区 */}
|
|
<div className="right-top">
|
|
<ImageDisplay />
|
|
</div>
|
|
{/* 下方：骰子区 */}
|
|
<div className="right-bottom">
|
|
<DicePanel />
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|