mirror of
https://github.com/SilenceLurker/ST-Amily2-Chat-Optimisation.git
synced 2026-06-06 19:25:50 +00:00
153 lines
8.0 KiB
HTML
153 lines
8.0 KiB
HTML
<div id="acc-window" class="acc-window">
|
|
<!-- 顶部栏 -->
|
|
<div class="acc-header">
|
|
<div class="acc-header-left">
|
|
<i class="fas fa-robot acc-logo"></i>
|
|
<span class="acc-title">Amily2 自动构建器</span>
|
|
<span id="acc-status-indicator" class="acc-status-badge status-idle">空闲</span>
|
|
</div>
|
|
<div class="acc-header-controls">
|
|
<button id="acc-minimize-btn" class="acc-control-btn" title="最小化"><i class="fas fa-window-minimize"></i></button>
|
|
<button id="acc-maximize-btn" class="acc-control-btn" title="全屏/还原"><i class="fas fa-expand"></i></button>
|
|
<button id="acc-close-btn" class="acc-control-btn" title="关闭"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主体内容 (三栏布局) -->
|
|
<div class="acc-body">
|
|
<!-- 左栏：工作区设置 -->
|
|
<div class="acc-column acc-left-panel">
|
|
<div class="acc-panel-header">
|
|
<i class="fas fa-cog"></i> 工作区设置
|
|
</div>
|
|
<div class="acc-panel-content">
|
|
<div class="acc-form-group">
|
|
<label>目标角色卡</label>
|
|
<select id="acc-target-char" class="acc-select">
|
|
<option value="">-- 请选择或新建 --</option>
|
|
<option value="new">新建空白角色</option>
|
|
</select>
|
|
</div>
|
|
<div class="acc-form-group">
|
|
<label>关联世界书</label>
|
|
<select id="acc-target-world" class="acc-select">
|
|
<option value="">-- 请选择或新建 --</option>
|
|
<option value="new">新建世界书</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="acc-divider"></div>
|
|
|
|
<div class="acc-section-title">当前任务</div>
|
|
<div id="acc-task-list" class="acc-task-list">
|
|
<div class="acc-task-item pending">等待指令...</div>
|
|
</div>
|
|
|
|
<div class="acc-divider"></div>
|
|
|
|
<div class="acc-panel-header" style="cursor: pointer;" id="acc-api-settings-toggle">
|
|
<i class="fas fa-network-wired"></i> API 配置 <i class="fas fa-chevron-down" style="float: right;"></i>
|
|
</div>
|
|
<div id="acc-api-settings-content" style="display: none; padding-top: 10px;">
|
|
<div class="acc-tabs">
|
|
<button class="acc-tab-btn active" data-target="executor">模型 A (执行)</button>
|
|
<button class="acc-tab-btn" data-target="reviewer">模型 B (规划)</button>
|
|
</div>
|
|
|
|
<div id="acc-api-executor" class="acc-api-group">
|
|
<div class="acc-form-group">
|
|
<label>API URL</label>
|
|
<input type="text" id="acc-executor-url" class="acc-input" placeholder="http://localhost:3000/v1">
|
|
</div>
|
|
<div class="acc-form-group">
|
|
<label>API Key</label>
|
|
<input type="password" id="acc-executor-key" class="acc-input" placeholder="sk-...">
|
|
</div>
|
|
<div class="acc-form-group">
|
|
<label>Model</label>
|
|
<div style="display: flex; gap: 5px;">
|
|
<select id="acc-executor-model" class="acc-select" style="flex: 1;">
|
|
<option value="">请刷新获取模型</option>
|
|
</select>
|
|
<button id="acc-executor-refresh-models" class="acc-btn-secondary" title="刷新模型列表"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
<button id="acc-executor-test" class="acc-btn-secondary" style="width: 100%;">测试连接</button>
|
|
</div>
|
|
|
|
<div id="acc-api-reviewer" class="acc-api-group" style="display: none;">
|
|
<div class="acc-form-group">
|
|
<label>API URL</label>
|
|
<input type="text" id="acc-reviewer-url" class="acc-input" placeholder="http://localhost:3000/v1">
|
|
</div>
|
|
<div class="acc-form-group">
|
|
<label>API Key</label>
|
|
<input type="password" id="acc-reviewer-key" class="acc-input" placeholder="sk-...">
|
|
</div>
|
|
<div class="acc-form-group">
|
|
<label>Model</label>
|
|
<div style="display: flex; gap: 5px;">
|
|
<select id="acc-reviewer-model" class="acc-select" style="flex: 1;">
|
|
<option value="">请刷新获取模型</option>
|
|
</select>
|
|
<button id="acc-reviewer-refresh-models" class="acc-btn-secondary" title="刷新模型列表"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
<button id="acc-reviewer-test" class="acc-btn-secondary" style="width: 100%;">测试连接</button>
|
|
</div>
|
|
|
|
<button id="acc-save-api" class="acc-btn-primary" style="width: 100%; margin-top: 10px;">保存配置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中栏：互动区域 -->
|
|
<div class="acc-column acc-center-panel">
|
|
<div class="acc-panel-header">
|
|
<i class="fas fa-comments"></i> 交互控制台
|
|
</div>
|
|
<div id="acc-chat-stream" class="acc-chat-stream">
|
|
<div class="acc-message system">
|
|
<div class="acc-message-content">
|
|
欢迎使用 Amily2 自动构建器。<br>
|
|
请在左侧配置工作区，然后在下方输入您的需求。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="acc-input-area">
|
|
<div class="acc-input-wrapper">
|
|
<textarea id="acc-user-input" placeholder="描述您的需求，例如：创建一个赛博朋克风格的黑客少女..." rows="2"></textarea>
|
|
<button id="acc-send-btn" class="acc-send-btn"><i class="fas fa-paper-plane"></i></button>
|
|
</div>
|
|
<div class="acc-input-controls">
|
|
<button id="acc-stop-btn" class="acc-btn-danger" style="display: none;"><i class="fas fa-stop"></i> 停止生成</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右栏：实时预览/Diff -->
|
|
<div class="acc-column acc-right-panel">
|
|
<div class="acc-panel-header">
|
|
<i class="fas fa-eye"></i> 内容预览
|
|
<div class="acc-preview-tabs">
|
|
<button class="acc-tab-btn active" data-tab="diff">变更对比</button>
|
|
<button class="acc-tab-btn" data-tab="preview">最终效果</button>
|
|
</div>
|
|
</div>
|
|
<div class="acc-panel-content" id="acc-preview-container">
|
|
<!-- 预览内容将动态插入这里 -->
|
|
<div class="acc-empty-state">
|
|
<i class="fas fa-file-alt"></i>
|
|
<p>暂无修改内容</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最小化后的图标 -->
|
|
<div id="acc-minimized-icon" class="acc-minimized-icon" style="display: none;">
|
|
<i class="fas fa-robot"></i>
|
|
<span class="acc-notification-dot" style="display: none;"></span>
|
|
</div>
|