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

初始化仓库及v1.0.0提交

Browse Source
This commit is contained in:
canglan
2026-05-05 03:21:58 +08:00
commit 813bb02672
67 changed files with 5263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
app/Views/chat.php Normal file
View 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>

249
app/Views/config.php Normal file
View File

@@ -0,0 +1,249 @@
<div class="config-container">
<div class="config-header">
<h1>⚙️ 系统配置</h1>
<a href="/chat.php" class="btn btn-secondary">← 返回聊天</a>
</div>
<!-- 供应商管理 -->
<div class="config-section">
<h2>AI 供应商管理</h2>
<div id="providerList">
<!-- 由 JS 动态渲染 -->
</div>
<button class="btn btn-secondary" onclick="ConfigPage.addProvider()" style="margin-top:12px;">+ 添加供应商</button>
</div>
<!-- 人格管理 -->
<div class="config-section">
<h2>人格管理</h2>
<div id="personalityList">
<!-- 由 JS 动态渲染 -->
</div>
<h3 style="margin-top:20px;">添加自定义人格</h3>
<div class="form-group">
<label>名称</label>
<input type="text" id="newPersonalityName" placeholder="人格名称">
</div>
<div class="form-group">
<label>图标（Emoji）</label>
<input type="text" id="newPersonalityIcon" placeholder="如：🤖" maxlength="2">
</div>
<div class="form-group">
<label>提示词</label>
<textarea id="newPersonalityPrompt" rows="3" placeholder="人格的系统提示词"></textarea>
</div>
<div class="form-group">
<label>描述</label>
<input type="text" id="newPersonalityDesc" placeholder="简短描述">
</div>
<button class="btn btn-primary" onclick="ConfigPage.createPersonality()">添加人格</button>
</div>
</div>
<div id="configMessage"></div>
<script>
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 style="color:var(--text-secondary)">暂无供应商配置</p>';
return;
}
list.innerHTML = this.providers.map((p, i) => `
<div class="provider-item" style="background:var(--bg-secondary);padding:16px;border-radius:var(--radius);margin-bottom:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
<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})" style="margin-left:8px;">删除</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 style="color:var(--text-secondary)">暂无人格</p>';
return;
}
list.innerHTML = this.personalities.map(p => `
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-secondary);border-radius:var(--radius);margin-bottom:8px;">
<div>
<span>${p.icon || '🤖'} ${this.escapeHtml(p.name)}</span>
${p.is_preset ? '<span style="color:var(--warning);font-size:12px;margin-left:8px;">预设</span>' : '<span style="color:var(--success);font-size:12px;margin-left:8px;">自定义</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'}" style="position:fixed;bottom:20px;right:20px;z-index:1000;min-width:200px;">${this.escapeHtml(text)}</div>`;
setTimeout(() => { el.innerHTML = ''; }, 3000);
},
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
};
ConfigPage.init();
</script>

0
app/Views/layout/.gitkeep Normal file
View File

10
app/Views/layout/footer.php Normal file
View File

@@ -0,0 +1,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked.js/12.0.0/marked.min.js"></script>
<script src="/assets/js/storage.js"></script>
<script src="/assets/js/api.js"></script>
<script src="/assets/js/markdown.js"></script>
<script src="/assets/js/session.js"></script>
<script src="/assets/js/upload.js"></script>
<script src="/assets/js/chat.js"></script>
</body>
</html>

12
app/Views/layout/header.php Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat</title>
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/chat.css">
<link rel="stylesheet" href="/assets/css/markdown.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
</head>
<body>

69
app/Views/login.php Normal file
View File

@@ -0,0 +1,69 @@
<div class="login-container">
<div class="login-card">
<h1>🤖 AI Chat</h1>
<div id="loginError" class="alert alert-error" style="display:none;"></div>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required autocomplete="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required autocomplete="current-password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block" id="loginBtn">登录</button>
</form>
</div>
</div>
<script>
// 页面加载时检查是否已登录
(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.style.display = 'block';
return;
}
btn.disabled = true;
btn.textContent = '登录中...';
errorEl.style.display = 'none';
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.style.display = 'block';
}
} catch (err) {
errorEl.textContent = '网络错误，请稍后重试';
errorEl.style.display = 'block';
} finally {
btn.disabled = false;
btn.textContent = '登录';
}
});
</script>