初始化仓库及v1.0.0提交
This commit is contained in:
164
app/Views/chat.php
Normal file
164
app/Views/chat.php
Normal file
@@ -0,0 +1,164 @@
|
||||
<div class="chat-layout" id="chatLayout">
|
||||
<!-- 左侧边栏 -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<button class="btn btn-primary btn-sm" onclick="SessionManager.createSession()">+ 新建会话</button>
|
||||
</div>
|
||||
<div class="session-list" id="sessionList">
|
||||
<!-- 由 SessionManager.renderSessionList() 动态渲染 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主聊天区域 -->
|
||||
<div class="chat-main">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="toggle-sidebar" onclick="toggleSidebar()" title="切换侧边栏">☰</button>
|
||||
|
||||
<select id="providerSelect" onchange="onProviderChange()">
|
||||
<option value="">选择供应商</option>
|
||||
<!-- 由 loadProviders() 动态填充 -->
|
||||
</select>
|
||||
|
||||
<select id="modelSelect">
|
||||
<option value="">选择模型</option>
|
||||
<!-- 由 onProviderChange() 动态填充 -->
|
||||
</select>
|
||||
|
||||
<label class="toggle-switch" title="思考模式">
|
||||
<input type="checkbox" id="thinkingMode">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span style="font-size:12px;color:var(--text-secondary)">思考</span>
|
||||
|
||||
<select id="personalitySelect">
|
||||
<option value="">默认人格</option>
|
||||
<!-- 由 loadPersonalities() 动态填充 -->
|
||||
</select>
|
||||
|
||||
<a href="/config.php" class="btn btn-secondary btn-sm" style="margin-left:auto;">⚙️ 设置</a>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="messages-container" id="messagesContainer">
|
||||
<div class="empty-state">
|
||||
<h3>开始新的对话</h3>
|
||||
<p>输入消息开始聊天</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区域 -->
|
||||
<div class="input-area">
|
||||
<div class="file-preview" id="filePreview"></div>
|
||||
<div class="input-wrapper">
|
||||
<button id="uploadBtn" title="上传文件" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;">📎</button>
|
||||
<textarea id="messageInput" rows="1" placeholder="输入消息，Ctrl+Enter 发送..."></textarea>
|
||||
<button id="sendBtn">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 切换侧边栏
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
// 供应商/模型数据缓存
|
||||
let providersData = [];
|
||||
let personalitiesData = [];
|
||||
|
||||
// 加载供应商配置
|
||||
async function loadProviders() {
|
||||
try {
|
||||
const res = await api.get('/config');
|
||||
providersData = res.data.providers || [];
|
||||
const select = document.getElementById('providerSelect');
|
||||
select.innerHTML = '<option value="">选择供应商</option>';
|
||||
providersData.forEach((p, i) => {
|
||||
if (p.enabled) {
|
||||
const option = document.createElement('option');
|
||||
option.value = i;
|
||||
option.textContent = p.name;
|
||||
select.appendChild(option);
|
||||
}
|
||||
});
|
||||
// 如果只有一个供应商，自动选择
|
||||
if (providersData.filter(p => p.enabled).length === 1) {
|
||||
select.value = providersData.findIndex(p => p.enabled);
|
||||
onProviderChange();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载供应商配置失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 供应商切换时更新模型列表
|
||||
function onProviderChange() {
|
||||
const index = document.getElementById('providerSelect').value;
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
modelSelect.innerHTML = '<option value="">选择模型</option>';
|
||||
|
||||
if (index !== '' && providersData[index]) {
|
||||
const provider = providersData[index];
|
||||
(provider.models || []).forEach(m => {
|
||||
const option = document.createElement('option');
|
||||
option.value = m;
|
||||
option.textContent = m;
|
||||
modelSelect.appendChild(option);
|
||||
});
|
||||
// 如果只有一个模型，自动选择
|
||||
if (provider.models && provider.models.length === 1) {
|
||||
modelSelect.value = provider.models[0];
|
||||
}
|
||||
// 如果有默认模型，自动选择
|
||||
if (provider.defaultModel) {
|
||||
modelSelect.value = provider.defaultModel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载人格列表
|
||||
async function loadPersonalities() {
|
||||
try {
|
||||
const res = await api.get('/personalities');
|
||||
personalitiesData = res.data || [];
|
||||
const select = document.getElementById('personalitySelect');
|
||||
select.innerHTML = '<option value="">默认人格</option>';
|
||||
personalitiesData.forEach(p => {
|
||||
const option = document.createElement('option');
|
||||
option.value = p.id;
|
||||
option.textContent = (p.icon || '🤖') + ' ' + p.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('加载人格列表失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面初始化
|
||||
(async function() {
|
||||
// 检查认证
|
||||
const token = Storage.getToken();
|
||||
if (!token) {
|
||||
window.location.href = '/login.php';
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化聊天管理器
|
||||
ChatManager.init();
|
||||
|
||||
// 加载数据
|
||||
await Promise.all([
|
||||
loadProviders(),
|
||||
loadPersonalities(),
|
||||
SessionManager.loadSessions()
|
||||
]);
|
||||
|
||||
// 如果有会话，自动选择第一个
|
||||
if (SessionManager.sessions.length > 0) {
|
||||
await SessionManager.switchSession(SessionManager.sessions[0].id);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user