File size: 9,287 Bytes
e636070 d738a3f e636070 d738a3f e636070 d738a3f e636070 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
<!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">
<!-- 事件内容将通过JS动态更新 -->
</div>
</div>
<div class="status-module" id="current-location">
<h3 data-i18n="currentLocation">当前地点</h3>
<div class="module-content">
<!-- 地点内容将通过JS动态更新 -->
</div>
</div>
<div class="status-module" id="current-group">
<h3 data-i18n="currentGroup">当前分组</h3>
<div class="module-content">
<div class="group-members">
<!-- 分组成员将通过JS动态更新 -->
</div>
</div>
</div>
</div>
</div>
<div class="tab-panel" id="settings-panel">
<div class="settings-container">
<!-- 设定内容将通过JS动态添加 -->
</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">
<!-- 场景按钮将通过JS动态添加 -->
</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">
<!-- 默认加载 OpenAI 模型 -->
<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();
// Check if the instance exists and if its listeners haven't been initialized yet
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>
|