将单文件巨型 IIFE (1608行) 拆分为 14 个 ES Module: 核心层: - js/state.js - 轻量级响应式状态管理 (发布-订阅) - js/utils.js - 通用工具函数 - js/sanitizer.js - HTML XSS 净化器 - js/marked-config.js - Markdown 渲染器配置 组件层: - js/components/chat-area.js - 消息渲染/流式更新/导出 - js/components/input-area.js - 文本输入/图片上传/发送 - js/components/history-modal.js - 历史记录面板/搜索/分页 - js/components/settings-modal.js - 设置面板/数据管理 - js/components/header.js - 顶部导航/连接状态 - js/components/model-bar.js - 模型选择栏 - js/components/toast.js - Toast 通知 - js/components/lightbox.js - 图片预览 入口层: - js/app.js - 主入口/初始化协调 index.html: 1608行 → 204行纯模板
79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
/**
|
|
* ModelBar - 模型选择栏组件
|
|
*/
|
|
|
|
import { state, KEYS } from '../state.js';
|
|
import { formatSize } from '../utils.js';
|
|
import { showToast } from './toast.js';
|
|
|
|
let modelSelectEl, toggleThinkEl;
|
|
|
|
export function initModelBar() {
|
|
modelSelectEl = document.querySelector('#modelSelect');
|
|
toggleThinkEl = document.querySelector('#toggleThink');
|
|
|
|
// 模型选择变化 → 保存到设置
|
|
modelSelectEl.addEventListener('change', async () => {
|
|
const db = state.get(KEYS.DB);
|
|
if (db) await db.saveSetting('selectedModel', modelSelectEl.value);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 加载模型列表
|
|
*/
|
|
export async function loadModels() {
|
|
const api = state.get(KEYS.API);
|
|
const db = state.get(KEYS.DB);
|
|
const currentSession = state.get(KEYS.CURRENT_SESSION);
|
|
|
|
if (!api) return;
|
|
|
|
try {
|
|
const data = await api.listModels();
|
|
modelSelectEl.innerHTML = '';
|
|
if (!data.models || data.models.length === 0) {
|
|
modelSelectEl.innerHTML = '<option value="">未安装任何模型</option>';
|
|
return;
|
|
}
|
|
|
|
data.models.forEach(m => {
|
|
const opt = document.createElement('option');
|
|
opt.value = m.name;
|
|
opt.textContent = `${m.name} (${formatSize(m.size)})`;
|
|
modelSelectEl.appendChild(opt);
|
|
});
|
|
|
|
// 恢复上次选择的模型
|
|
if (currentSession && currentSession.model) {
|
|
modelSelectEl.value = currentSession.model;
|
|
}
|
|
|
|
if (db) await db.saveSetting('selectedModel', modelSelectEl.value);
|
|
} catch (err) {
|
|
console.error('[ModelBar] 加载模型失败:', err);
|
|
modelSelectEl.innerHTML = '<option value="">加载失败 - 检查连接</option>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取当前选择的模型
|
|
*/
|
|
export function getSelectedModel() {
|
|
return modelSelectEl.value;
|
|
}
|
|
|
|
/**
|
|
* 设置选中的模型
|
|
*/
|
|
export function setSelectedModel(modelName) {
|
|
modelSelectEl.value = modelName;
|
|
}
|
|
|
|
/**
|
|
* Think 模式是否开启
|
|
*/
|
|
export function isThinkEnabled() {
|
|
return toggleThinkEl.checked;
|
|
}
|