将 /model add 功能集成到 WebUI 模型切换

🪐 DeepSeek 思考过程

我们被用户要求“把 /model add 这个命令做到 WebUI 模型切换里面”。需要理解一下：目前 WebUI 有模型选择器，从 /api/models 加载。用户可能希望除了 CLI 的 /model add 命令，在 WebUI 里也能添加自定义模型。这意味着 WebUI 需要一个“添加模型”功能，可能是一个设置弹窗或单独的模块，让用户输入模型名、ID、URL、密钥等，然后调用后端接口来添加模型。需要检查后端是否提供了 API 接口用于添加用户模型，如果只有 CLI 命令，需要新增一个 API，然后前端实现添加界面。

需要询问或者直接行动。用户之前的对话提到把内置模型列表改成指定 7 个，并保留用户自定义添加功能，现在说“/model add 这个命令的做到webUI模型切换里面”。可能的意思是：把 /model add 的功能集成到 WebUI 里，让用户在网页上就能添加自定义模型，而不用命令行。最好提供方案。

所以我会设计一个原子级执行方案：后端添加 /api/models/add 接口，前端在设置弹窗或模型选择器旁边增加“添加模型”按钮，弹出表单。改动小。

由于用户要求“Hermes 原子级指令”，我会给出具体的 shell 命令和代码补丁。

但需要先确认一下当前 web.ts 和 models.ts 的相关代码。不过根据之前的上下文，我们已经知道有 loadUserModels 和 saveUserModels（可能在 models.ts 或 user-models.ts 中）。假设 user-models.ts 中有 addUserModel 或类似函数。如果没有，我们需要构建一个。

最好先检查一下是否存在添加模型的 API 端点。如果不存在，需要创建。

会给出：1) 检查后端是否有 /api/models/add；2) 如果没有则添加；3) 修改 index.html 增加添加模型表单。

用户要求 Hemes 原子级指令，我将提供。

🤖 DeepSeek 助手

目标

将 /model add 功能集成到 WebUI 的模型切换区域，让用户无需 CLI 即可在网页上添加自定义模型。

实现方案

1. 后端新增 POST /api/models/add 接口 2. 前端在模型选择器旁边增加「+」按钮 → 弹出添加模型表单 3. 添加成功后自动刷新模型列表，不影响 7 个内置模型

🔧 Hermes 原子级执行指令

第一步：检查后端是否已有添加接口

grep -rn "models/add\|addModel\|addUserModel" /home/administrator/CmdCode-V0.5/src/

*若已有，则跳过第二步的前半部分。*

第二步：后端 — 新增添加模型 API

文件：src/web.ts 在现有 /api/models GET 路由下方添加：

// --- 新增：添加用户自定义模型 ---
if (url.pathname === '/api/models/add' && req.method === 'POST') {
    try {
        const body = await req.json();
        const { name, id, provider, url: apiUrl, key } = body;
        if (!name || !id || !provider) {
            return new Response(JSON.stringify({ error: 'name, id, provider 为必填项' }), { status: 400 });
        }
        // 调用模型管理模块添加（需先在 models.ts 或 user-models.ts 中暴露 addUserModel）
        const result = addUserModel({ name, id, provider, url: apiUrl, key });
        return new Response(JSON.stringify({ success: true, message: '模型已添加', model: result }), {
            headers: { 'Content-Type': 'application/json' }
        });
    } catch (e) {
        return new Response(JSON.stringify({ error: e.message }), { status: 500 });
    }
}

文件：src/user-models.ts（或 src/models.ts 中暴露函数）确保导出：

export function addUserModel(model: UserModelInput): UserModel {
    const existing = loadUserModels();
    if (existing.some(m => m.id === model.id)) {
        throw new Error(模型 ID ${model.id} 已存在);
    }
    const newModel: UserModel = {
        id: model.id,
        name: model.name,
        provider: model.provider,
        baseUrl: model.url || '',
        apiKey: model.key || '',
        createdAt: Date.now()
    };
    existing.push(newModel);
    saveUserModels(existing);
    return newModel;
}

*注意：若 user-models.ts 已有 addUserModel，只需确保 web.ts 能正确导入。*

第三步：前端 — 模型选择器旁加“+”按钮和添加弹窗

文件：webui/index.html

A. 找到模型选择器区域（<select id="model-select"> 附近），在它后面添加一个“+”按钮：

<button id="add-model-btn" title="添加自定义模型" style="margin-left: 8px; background: var(--accent); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; cursor: pointer;">＋</button>

B. 在设置弹窗或独立模态框中加入添加模型表单，复制以下 HTML 到 <body> 底部（与设置弹窗并列）：

<!-- 添加模型弹窗 -->
<div id="add-model-modal" class="modal-sheet" style="display: none;">
  <div class="modal-content">
    <h3>添加自定义模型</h3>
    <input type="text" id="new-model-name" placeholder="显示名称 (如 My-GPT)" />
    <input type="text" id="new-model-id" placeholder="模型 ID (如 my-gpt-4)" />
    <input type="text" id="new-model-provider" placeholder="厂商 (如 OpenAI)" />
    <input type="text" id="new-model-url" placeholder="接口地址 (https://api.x.com/v1)" />
    <input type="password" id="new-model-key" placeholder="API Key" />
    <div style="display:flex; gap: 8px; margin-top: 12px;">
      <button id="confirm-add-model" style="flex:1; background: var(--accent); color: white;">添加</button>
      <button id="cancel-add-model" style="flex:1;">取消</button>
    </div>
  </div>
</div>

C. 添加 JavaScript 逻辑（在 <script> 内最后）：

// 添加模型按钮
document.getElementById('add-model-btn').addEventListener('click', () => {
    document.getElementById('add-model-modal').style.display = 'flex';
});
document.getElementById('cancel-add-model').addEventListener('click', () => {
    document.getElementById('add-model-modal').style.display = 'none';
});// 确认添加
document.getElementById('confirm-add-model').addEventListener('click', async () => {
    const name = document.getElementById('new-model-name').value.trim();
    const id = document.getElementById('new-model-id').value.trim();
    const provider = document.getElementById('new-model-provider').value.trim();
    const url = document.getElementById('new-model-url').value.trim();
    const key = document.getElementById('new-model-key').value.trim();
    if (!name || !id || !provider) return alert('名称、ID、厂商为必填');
    
    try {
        const res = await fetch(apiBase + '/api/models/add', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, id, provider, url, key })
        });
        const data = await res.json();
        if (data.success) {
            document.getElementById('add-model-modal').style.display = 'none';
            loadModels();  // 重新加载模型列表
            showToast('模型已添加');
            // 清空表单
            ['new-model-name','new-model-id','new-model-provider','new-model-url','new-model-key'].forEach(id => document.getElementById(id).value = '');
        } else {
            alert('添加失败: ' + data.error);
        }
    } catch(e) {
        alert('网络错误');
    }
});

第四步：重启服务验证

cd /home/administrator/CmdCode-V0.5
pkill -f "bun run src/cli.ts" 2>/dev/null
bun run src/cli.ts &

打开 WebUI，点击模型选择器旁的＋按钮，填写信息添加一个测试模型，确认下拉列表中出现新增选项。

预期效果

纯内置 7 个模型始终存在
用户可通过 WebUI 添加/管理自定义模型（当前版本仅添加，后续可扩展删除）
CLI 的 /model add 仍然可用，两者操作同一加密存储，数据同步

执行完上述步骤后，页面将完全符合你的要求。任何报错随时反馈。