index.html

<!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="./frontend/css/right-section/preset-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="scenes-panel" data-i18n="scenes">场景</button>
                <button class="tab-btn" data-target="preset-panel" data-i18n="preset">预设</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 class="status-module" id="settings-module">
                            <h3 data-i18n="settings">设定</h3>
                            <div class="module-content settings-content">
                                <!-- 设定内容将通过JS动态添加 -->
                            </div>
                        </div>
                    </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="preset-panel">
                    <div class="preset-container">
                        <div class="preset-header">
                            <h3 data-i18n="presetList">预设列表</h3>
                        </div>
                        <select class="preset-select">
                            <!-- 预设选项将通过JS动态添加 -->
                        </select>
                        <button class="preset-submit-btn" disabled>Load</button>
                    </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 src="./frontend/js/right-section/preset-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>