thzxx
41b512c779
- assets/icons/ → 图标资源 (llama.ico, llama.png) - css/ → 样式文件 (style.css) - js/ → 所有业务代码 - js/lib/ → 第三方库 (marked.esm.js) - js/components/ → UI 组件 修正所有 import 路径、HTML 引用、SW 缓存列表
99 lines
3.1 KiB
JavaScript
99 lines
3.1 KiB
JavaScript
/**
|
|
* Header - 顶部导航组件
|
|
* 包含连接状态检测、新建会话按钮
|
|
*/
|
|
|
|
import { state, KEYS } from '../state.js';
|
|
import { formatSize } from '../utils.js';
|
|
import { OllamaAPI } from '../ollama-api.js';
|
|
|
|
let connStatusEl;
|
|
|
|
export function initHeader() {
|
|
connStatusEl = document.querySelector('#connStatus');
|
|
}
|
|
|
|
/**
|
|
* 检测连接状态并更新 UI
|
|
* @returns {Promise<{ok: boolean, version?: object, error?: Error}>}
|
|
*/
|
|
export async function checkConnection() {
|
|
const api = state.get(KEYS.API);
|
|
if (!api) return { ok: false, error: new Error('API 未初始化') };
|
|
|
|
connStatusEl.className = 'conn-status pending';
|
|
connStatusEl.querySelector('.status-label').textContent = '连接中...';
|
|
|
|
try {
|
|
const version = await api.getVersion();
|
|
connStatusEl.className = 'conn-status connected';
|
|
connStatusEl.title = `已连接 (v${version.version})`;
|
|
connStatusEl.querySelector('.status-label').textContent = '已连接';
|
|
return { ok: true, version };
|
|
} catch (err) {
|
|
connStatusEl.className = 'conn-status disconnected';
|
|
connStatusEl.title = '未连接';
|
|
connStatusEl.querySelector('.status-label').textContent = '未连接';
|
|
return { ok: false, error: err };
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 更新设置面板中的连接信息
|
|
*/
|
|
export async function updateConnectionInfo() {
|
|
const api = state.get(KEYS.API);
|
|
if (!api) return;
|
|
|
|
const badge = document.querySelector('#connBadge');
|
|
const verEl = document.querySelector('#serverVersion');
|
|
const corsHint = document.querySelector('#corsHint');
|
|
|
|
badge.textContent = '检测中...';
|
|
badge.className = 'status-badge warning';
|
|
verEl.textContent = '';
|
|
|
|
try {
|
|
const version = await api.getVersion();
|
|
badge.textContent = '✓ 已连接';
|
|
badge.className = 'status-badge success';
|
|
verEl.textContent = `v${version.version}`;
|
|
corsHint.style.display = 'none';
|
|
} catch (err) {
|
|
badge.textContent = '✗ 未连接';
|
|
badge.className = 'status-badge error';
|
|
verEl.textContent = '';
|
|
|
|
if (err.message.includes('Failed to fetch') || err.message.includes('NetworkError') || err.message.includes('CORS')) {
|
|
corsHint.style.display = '';
|
|
} else {
|
|
corsHint.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 更新运行中的模型列表
|
|
*/
|
|
export async function updateRunningModels() {
|
|
const api = state.get(KEYS.API);
|
|
if (!api) return;
|
|
|
|
const container = document.querySelector('#runningModels');
|
|
try {
|
|
const data = await api.psModels();
|
|
if (!data.models || data.models.length === 0) {
|
|
container.innerHTML = '<p class="text-muted">无运行中的模型</p>';
|
|
return;
|
|
}
|
|
container.innerHTML = data.models.map(m => `
|
|
<div class="running-model">
|
|
<span class="model-name">${m.name}</span>
|
|
<span class="model-vram">${formatSize(m.size_vram || 0)} VRAM</span>
|
|
</div>
|
|
`).join('');
|
|
} catch {
|
|
container.innerHTML = '<p class="text-muted">无法获取运行信息</p>';
|
|
}
|
|
}
|