|
|
<!DOCTYPE html> |
|
|
<html lang="zh"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>聊天界面</title> |
|
|
<link rel="icon" type="image/x-icon" href="./frontend/assets/favicon.ico" /> |
|
|
<link rel="stylesheet" href="./frontend/css/main.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/message.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/left-section/map-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/left-section/profile-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/api-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/settings-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/status-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/scene-panel.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
<script src="https://d3js.org/d3.v7.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="main-container"> |
|
|
|
|
|
<div class="left-section"> |
|
|
<div class="map-section"> |
|
|
<h3 class="map-title" data-i18n="map">地图</h3> |
|
|
<div id="map-container"> |
|
|
<div id="map"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="character-profiles"> |
|
|
<h3 class="profiles-title" data-i18n="characterProfiles">角色档案</h3> |
|
|
<div class="profiles-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-container"> |
|
|
|
|
|
<div class="toolbar"> |
|
|
<div class="left-tools"> |
|
|
<button id="controlBtn" class="control-btn"> |
|
|
<i class="fas fa-play"></i> |
|
|
<span data-i18n="start">开始</span> |
|
|
</button> |
|
|
<button id="stopBtn" class="control-btn"> |
|
|
<i class="fas fa-stop"></i> |
|
|
<span data-i18n="stop">停止</span> |
|
|
</button> |
|
|
<button id="exportStoryBtn" class="control-btn"> |
|
|
<i class="fas fa-book"></i> |
|
|
<span data-i18n="exportStory">输出故事</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="right-tools"> |
|
|
<button id="languageBtn" class="language-btn"> |
|
|
<i class="fas fa-language"></i> |
|
|
<span data-i18n="switchLang">EN/中</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chat-messages"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="input-area"> |
|
|
<button class="menu-btn"><i class="fas fa-bars"></i></button> |
|
|
<textarea placeholder="input"></textarea> |
|
|
<button class="send-btn"><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right-section"> |
|
|
<div class="right-toolbar"> |
|
|
<button class="tab-btn active" data-target="status-panel" data-i18n="status">状态</button> |
|
|
<button class="tab-btn" data-target="settings-panel" data-i18n="settings">设定</button> |
|
|
<button class="tab-btn" data-target="scenes-panel" data-i18n="scenes">场景</button> |
|
|
<button class="tab-btn" data-target="api-panel" data-i18n="APIsettings">API设置</button> |
|
|
</div> |
|
|
<div class="right-content"> |
|
|
<div class="tab-panel active" id="status-panel"> |
|
|
<div class="status-container"> |
|
|
<div class="status-module" id="current-event"> |
|
|
<h3 data-i18n="currentEvent">当前事件</h3> |
|
|
<div class="module-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status-module" id="current-location"> |
|
|
<h3 data-i18n="currentLocation">当前地点</h3> |
|
|
<div class="module-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status-module" id="current-group"> |
|
|
<h3 data-i18n="currentGroup">当前分组</h3> |
|
|
<div class="module-content"> |
|
|
<div class="group-members"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-panel" id="settings-panel"> |
|
|
<div class="settings-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-panel" id="scenes-panel"> |
|
|
<div class="scenes-container"> |
|
|
<div class="scenes-header"> |
|
|
<h3 data-i18n="scenesList">场景列表</h3> |
|
|
</div> |
|
|
<div class="scene-buttons"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-panel" id="api-panel"> |
|
|
<div class="api-container"> |
|
|
<label for="api-provider"><h3 data-i18n="apiProvider">API 提供商:</h3></label> |
|
|
<select id="api-provider" class="api-model-select"> |
|
|
<option value="openai">OpenAI</option> |
|
|
<option value="anthropic">Anthropic</option> |
|
|
<option value="alibaba">Alibaba</option> |
|
|
<option value="openrouter">OpenRouter</option> |
|
|
</select> |
|
|
|
|
|
<label for="api-model"><h3 data-i18n="model">模型:</h3></label> |
|
|
<select id="api-model" class="api-model-select"> |
|
|
|
|
|
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option> |
|
|
<option value="gpt-4">gpt-4</option> |
|
|
</select> |
|
|
|
|
|
<label for="api-key">API Key:</label> |
|
|
<input type="password" id="api-key" placeholder="Enter API Key"> |
|
|
|
|
|
<button class="api-submit-btn">Submit</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script src="./frontend/js/i18n.js"></script> |
|
|
<script src="./frontend/js/message.js"></script> |
|
|
<script src="./frontend/js/left-section/map-panel.js"></script> |
|
|
<script src="./frontend/js/left-section/profile-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/api-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/right-section.js"></script> |
|
|
<script src="./frontend/js/right-section/settings-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/status-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/scene-panel.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
if (window.RightSection) { |
|
|
if (!window.rightSectionInstance) { |
|
|
window.rightSectionInstance = new window.RightSection(); |
|
|
console.log('主界面右侧面板已初始化'); |
|
|
} |
|
|
} else { |
|
|
console.error("RightSection class not found during initialization."); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (window.APIPanel) { |
|
|
const apiPanelInstance = new window.APIPanel(); |
|
|
|
|
|
if (apiPanelInstance && !apiPanelInstance.initialized) { |
|
|
console.log('APIPanel: Calling init() to attach listeners.'); |
|
|
apiPanelInstance.init(); |
|
|
} else if (apiPanelInstance && apiPanelInstance.initialized) { |
|
|
console.log('APIPanel: Instance found, listeners already initialized.'); |
|
|
} else if (!apiPanelInstance) { |
|
|
console.error('APIPanel: Failed to get instance within setTimeout.'); |
|
|
} |
|
|
} else { |
|
|
console.error('APIPanel class not found within setTimeout!'); |
|
|
} |
|
|
|
|
|
}, 500); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
