v1.0.4修复优化

assets/css/style.css

@@ -649,3 +649,125 @@ body {
         font-size: 22px;
     }
 }
+
+/* ========================================
+   工具类
+   ======================================== */
+.hidden { display: none !important; }
+.ml-auto { margin-left: auto; }
+.mt-sm { margin-top: 12px; }
+.mt-md { margin-top: 16px; }
+.mt-lg { margin-top: 24px; }
+.full-width { width: 100%; }
+.text-muted { color: var(--text-secondary); }
+.text-xs { font-size: 12px; }
+.text-center { text-align: center; }
+.col-flex-2 { flex: 2; }
+.col-flex-1 { flex: 1; }
+
+/* 内联 SVG 图标对齐 */
+.icon-inline {
+    vertical-align: -2px;
+    margin-right: 4px;
+}
+
+.icon-inline-md {
+    vertical-align: -4px;
+    margin-right: 8px;
+}
+
+/* ========================================
+   聊天页工具栏组件
+   ======================================== */
+.toolbar-think-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.upload-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+}
+
+.settings-link {
+    margin-left: auto;
+}
+
+/* ========================================
+   配置页组件
+   ======================================== */
+.config-add-btn {
+    margin-top: 12px;
+}
+
+.config-section h3 {
+    margin-top: 20px;
+    margin-bottom: 16px;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.config-empty {
+    color: var(--text-secondary);
+}
+
+.config-provider-card {
+    background: var(--bg-secondary);
+    padding: 16px;
+    border-radius: var(--radius);
+    margin-bottom: 12px;
+}
+
+.config-provider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.config-provider-header strong {
+    font-size: 15px;
+}
+
+.config-provider-header .toggle-switch {
+    margin-right: 8px;
+}
+
+.personality-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius);
+    margin-bottom: 8px;
+}
+
+.personality-icon {
+    margin-right: 4px;
+}
+
+.personality-badge {
+    font-size: 12px;
+    margin-left: 8px;
+}
+
+.personality-badge.preset {
+    color: var(--warning);
+}
+
+.personality-badge.custom {
+    color: var(--success);
+}
+
+/* 固定定位消息提示（配置页用） */
+.toast-message {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    min-width: 200px;
+}

assets/js/chat.js

@@ -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);
+    }
+})();

assets/js/config.js

@@ -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();

assets/js/install.js

@@ -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();

assets/js/login.js

@@ -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 = '登录';
+    }
+});