canglan/AI-Chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.4修复优化

Browse Source
This commit is contained in:
canglan
2026-05-06 17:25:06 +08:00
parent dec5f8c4d4
commit 2edf393b15
9 changed files with 717 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
assets/js/chat.js
View File

@@ -306,3 +306,109 @@ const ChatManager = {
return div.innerHTML;
}
};
// ========================================
// 聊天页面初始化
// ========================================
// 切换侧边栏
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.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);
}
})();

203
assets/js/config.js Normal file
View File

@@ -0,0 +1,203 @@
const ConfigPage = {
providers: [],
personalities: [],
async init() {
// 检查认证和管理员权限
const token = Storage.getToken();
if (!token) {
window.location.href = '/login.php';
return;
}
try {
// 验证管理员权限
const userRes = await api.get('/auth/me');
if (userRes.data.role !== 'admin') {
window.location.href = '/chat.php';
return;
}
} catch (err) {
window.location.href = '/login.php';
return;
}
await this.loadProviders();
await this.loadPersonalities();
},
async loadProviders() {
try {
const res = await api.get('/config');
this.providers = res.data.providers || [];
this.renderProviders();
} catch (err) {
this.showMessage('加载供应商配置失败: ' + err.message, 'error');
}
},
renderProviders() {
const list = document.getElementById('providerList');
if (this.providers.length === 0) {
list.innerHTML = '<p class="config-empty">暂无供应商配置</p>';
return;
}
list.innerHTML = this.providers.map((p, i) => `
<div class="config-provider-card">
<div class="config-provider-header">
<strong>${this.escapeHtml(p.name)}</strong>
<div>
<label class="toggle-switch">
<input type="checkbox" ${p.enabled ? 'checked' : ''} onchange="ConfigPage.toggleProvider(${i}, this.checked)">
<span class="slider"></span>
</label>
<button class="btn btn-danger btn-sm" onclick="ConfigPage.deleteProvider(${i})">删除</button>
</div>
</div>
<div class="form-group">
<label>API URL</label>
<input type="text" value="${this.escapeHtml(p.apiUrl || '')}" onchange="ConfigPage.updateProvider(${i}, 'apiUrl', this.value)">
</div>
<div class="form-group">
<label>API Key</label>
<input type="password" value="${this.escapeHtml(p.apiKey || '')}" onchange="ConfigPage.updateProvider(${i}, 'apiKey', this.value)" placeholder="API 密钥">
</div>
<div class="form-group">
<label>可用模型（逗号分隔）</label>
<input type="text" value="${this.escapeHtml((p.models || []).join(', '))}" onchange="ConfigPage.updateProviderModels(${i}, this.value)">
</div>
<div class="form-group">
<label>供应商类型</label>
<select onchange="ConfigPage.updateProvider(${i}, 'type', this.value)">
<option value="newapi" ${p.type === 'newapi' ? 'selected' : ''}>OpenAI 兼容</option>
<option value="openai" ${p.type === 'openai' ? 'selected' : ''}>OpenAI 官方</option>
<option value="claude" ${p.type === 'claude' ? 'selected' : ''}>Claude (Anthropic)</option>
</select>
</div>
</div>
`).join('');
},
addProvider() {
this.providers.push({
name: '新供应商',
apiUrl: '',
apiKey: '',
models: [],
type: 'newapi',
enabled: true
});
this.renderProviders();
this.saveProviders();
},
updateProvider(index, field, value) {
this.providers[index][field] = value;
this.saveProviders();
},
updateProviderModels(index, value) {
this.providers[index].models = value.split(',').map(m => m.trim()).filter(m => m);
this.saveProviders();
},
toggleProvider(index, enabled) {
this.providers[index].enabled = enabled;
this.saveProviders();
},
deleteProvider(index) {
if (!confirm('确定要删除供应商 "' + this.providers[index].name + '" 吗？')) return;
this.providers.splice(index, 1);
this.renderProviders();
this.saveProviders();
},
async saveProviders() {
try {
await api.put('/config', { providers: this.providers });
this.showMessage('供应商配置已保存', 'success');
} catch (err) {
this.showMessage('保存失败: ' + err.message, 'error');
}
},
async loadPersonalities() {
try {
const res = await api.get('/personalities');
this.personalities = res.data || [];
this.renderPersonalities();
} catch (err) {
this.showMessage('加载人格列表失败: ' + err.message, 'error');
}
},
renderPersonalities() {
const list = document.getElementById('personalityList');
if (this.personalities.length === 0) {
list.innerHTML = '<p class="config-empty">暂无人格</p>';
return;
}
list.innerHTML = this.personalities.map(p => `
<div class="personality-item">
<div>
<span>${p.icon ? '<span class="personality-icon">' + this.escapeHtml(p.icon) + '</span>' : ''}${this.escapeHtml(p.name)}</span>
${p.is_preset ? '<span class="personality-badge preset">预设</span>' : '<span class="personality-badge custom">自定义</span>'}
</div>
${!p.is_preset ? '<button class="btn btn-danger btn-sm" onclick="ConfigPage.deletePersonality(' + p.id + ')">删除</button>' : ''}
</div>
`).join('');
},
async createPersonality() {
const name = document.getElementById('newPersonalityName').value.trim();
const prompt = document.getElementById('newPersonalityPrompt').value.trim();
const icon = document.getElementById('newPersonalityIcon').value.trim();
const description = document.getElementById('newPersonalityDesc').value.trim();
if (!name || !prompt) {
this.showMessage('名称和提示词不能为空', 'error');
return;
}
try {
await api.post('/personalities', { name, prompt, icon, description });
this.showMessage('人格创建成功', 'success');
// 清空表单
document.getElementById('newPersonalityName').value = '';
document.getElementById('newPersonalityPrompt').value = '';
document.getElementById('newPersonalityIcon').value = '';
document.getElementById('newPersonalityDesc').value = '';
await this.loadPersonalities();
} catch (err) {
this.showMessage('创建失败: ' + err.message, 'error');
}
},
async deletePersonality(id) {
if (!confirm('确定要删除这个人格吗？')) return;
try {
await api.delete('/personalities/' + id);
this.showMessage('人格已删除', 'success');
await this.loadPersonalities();
} catch (err) {
this.showMessage('删除失败: ' + err.message, 'error');
}
},
showMessage(text, type) {
const el = document.getElementById('configMessage');
el.innerHTML = `<div class="alert alert-${type === 'error' ? 'error' : 'success'} toast-message">${this.escapeHtml(text)}</div>`;
setTimeout(() => { el.innerHTML = ''; }, 3000);
},
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
};
ConfigPage.init();

201
assets/js/install.js Normal file
View File

@@ -0,0 +1,201 @@
const InstallWizard = {
currentStep: 1,
totalSteps: 5,
init() {
this.checkEnv();
this.addProvider(); // 默认添加一个供应商表单
},
checkEnv() {
const checks = document.getElementById('envCheckData');
if (!checks) return;
const data = JSON.parse(checks.textContent);
const container = document.getElementById('envChecks');
container.innerHTML = data.map(c => `
<div class="check-item ${c.pass ? 'pass' : 'fail'}">
<span class="check-name">${c.name}</span>
<span class="check-status">
${c.pass
? '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> 通过'
: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg> 未通过'
}
</span>
</div>
`).join('');
},
nextStep() {
if (this.currentStep === 4) {
// 验证管理员密码
const pwd = document.getElementById('adminPassword').value;
const confirm = document.getElementById('adminPasswordConfirm').value;
const username = document.getElementById('adminUsername').value;
if (!username) { alert('请输入管理员用户名'); return; }
if (pwd.length < 6) { alert('密码至少6位'); return; }
if (pwd !== confirm) { alert('两次密码不一致'); return; }
}
if (this.currentStep < this.totalSteps) {
this.currentStep++;
this.updateSteps();
}
},
prevStep() {
if (this.currentStep > 1) {
this.currentStep--;
this.updateSteps();
}
},
updateSteps() {
document.querySelectorAll('.step-content').forEach((el, i) => {
el.classList.toggle('active', i + 1 === this.currentStep);
});
document.querySelectorAll('.step-indicator .step').forEach((el, i) => {
el.classList.remove('active', 'completed');
if (i + 1 === this.currentStep) el.classList.add('active');
if (i + 1 < this.currentStep) el.classList.add('completed');
});
},
async testDb() {
const result = document.getElementById('dbTestResult');
try {
const response = await fetch('/api/install/test-db', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
host: document.getElementById('dbHost').value,
port: parseInt(document.getElementById('dbPort').value),
user: document.getElementById('dbUser').value,
password: document.getElementById('dbPassword').value,
database: document.getElementById('dbName').value
})
});
const data = await response.json();
result.innerHTML = `<div class="alert ${data.success ? 'alert-success' : 'alert-error'}">${data.message}</div>`;
} catch (err) {
result.innerHTML = '<div class="alert alert-error">连接失败: ' + err.message + '</div>';
}
},
addProvider() {
const list = document.getElementById('providerList');
const index = list.children.length;
const html = `
<div class="provider-item" data-index="${index}">
<div class="provider-item-header">
<span class="provider-item-title">供应商 #${index + 1}</span>
${index > 0 ? '<button class="btn btn-danger btn-sm" onclick="this.closest(\'.provider-item\').remove()">删除</button>' : ''}
</div>
<div class="form-row">
<div class="form-group col-flex-1">
<label>供应商名称</label>
<input type="text" class="provider-name" placeholder="如：OpenAI、DeepSeek">
</div>
<div class="form-group col-flex-1">
<label>供应商类型</label>
<select class="provider-type">
<option value="newapi">OpenAI 兼容</option>
<option value="openai">OpenAI 官方</option>
<option value="claude">Claude (Anthropic)</option>
</select>
</div>
</div>
<div class="form-group">
<label>API URL</label>
<input type="text" class="provider-url" placeholder="如：https://api.openai.com">
</div>
<div class="form-group">
<label>API Key</label>
<input type="password" class="provider-key" placeholder="API 密钥">
</div>
<div class="form-group">
<label>可用模型（逗号分隔）</label>
<input type="text" class="provider-models" placeholder="如：gpt-3.5-turbo, gpt-4">
</div>
</div>
`;
list.insertAdjacentHTML('beforeend', html);
},
generateSecret() {
const chars = '0123456789abcdef';
let result = '';
for (let i = 0; i < 64; i++) {
result += chars[Math.floor(Math.random() * chars.length)];
}
return result;
},
async runInstall() {
const btn = document.getElementById('installBtn');
const result = document.getElementById('installResult');
// 收集供应商数据
const providers = [];
document.querySelectorAll('.provider-item').forEach(item => {
const models = item.querySelector('.provider-models').value.split(',').map(m => m.trim()).filter(m => m);
providers.push({
name: item.querySelector('.provider-name').value,
apiUrl: item.querySelector('.provider-url').value,
apiKey: item.querySelector('.provider-key').value,
models: models,
type: item.querySelector('.provider-type').value,
enabled: true
});
});
if (providers.length === 0 || !providers[0].name || !providers[0].apiKey) {
alert('请至少配置一个完整的供应商');
return;
}
btn.disabled = true;
btn.textContent = '安装中...';
const setupData = {
username: document.getElementById('adminUsername').value,
password: document.getElementById('adminPassword').value,
dbConfig: {
host: document.getElementById('dbHost').value,
port: parseInt(document.getElementById('dbPort').value),
user: document.getElementById('dbUser').value,
password: document.getElementById('dbPassword').value,
database: document.getElementById('dbName').value
},
appConfig: {
jwtSecret: document.getElementById('jwtSecret').value || undefined,
jwtExpiry: parseInt(document.getElementById('jwtExpiry').value) || 86400
},
providers: providers
};
try {
const response = await fetch('/api/install/setup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(setupData)
});
const data = await response.json();
if (data.success) {
result.innerHTML = '<div class="alert alert-success">安装成功！正在跳转到登录页...</div>';
setTimeout(() => { window.location.href = '/login.php'; }, 2000);
} else {
result.innerHTML = '<div class="alert alert-error">安装失败: ' + data.message + '</div>';
btn.disabled = false;
btn.textContent = '完成安装';
}
} catch (err) {
result.innerHTML = '<div class="alert alert-error">安装失败: ' + err.message + '</div>';
btn.disabled = false;
btn.textContent = '完成安装';
}
}
};
InstallWizard.init();

50
assets/js/login.js Normal file
View File

@@ -0,0 +1,50 @@
// 页面加载时检查是否已登录
(function() {
const token = localStorage.getItem('token');
if (token) {
window.location.href = '/chat.php';
}
})();
// 登录表单提交
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = document.getElementById('loginBtn');
const errorEl = document.getElementById('loginError');
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
if (!username || !password) {
errorEl.textContent = '请输入用户名和密码';
errorEl.classList.remove('hidden');
return;
}
btn.disabled = true;
btn.textContent = '登录中...';
errorEl.classList.add('hidden');
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
const data = await response.json();
if (data.success) {
localStorage.setItem('token', data.data.token);
window.location.href = '/chat.php';
} else {
errorEl.textContent = data.message || '登录失败';
errorEl.classList.remove('hidden');
}
} catch (err) {
errorEl.textContent = '网络错误，请稍后重试';
errorEl.classList.remove('hidden');
} finally {
btn.disabled = false;
btn.textContent = '登录';
}
});