feat: v1.4.3 - 后台系统设置优化

1. 自然语言默认提示文本使用多行textarea
2. 默认GPU/版本/模式使用实时下拉列表选择(非手动输入)
3. 新增 show_nl_section 设置控制前端是否显示自然语言区域
4. LLM系统提示词也使用textarea
5. 布尔类设置项使用是/否下拉选择

app.py

@@ -626,8 +626,12 @@ def get_models_grouped():
 def get_public_settings():
     db = get_db()
     nl = db.execute("SELECT value FROM settings WHERE key = 'nl_default_text'").fetchone()
+    snl = db.execute("SELECT value FROM settings WHERE key = 'show_nl_section'").fetchone()
     db.close()
-    return jsonify({'nl_default_text': nl['value'] if nl else ''})
+    return jsonify({
+        'nl_default_text': nl['value'] if nl else '',
+        'show_nl_section': snl['value'] if snl else 'true',
+    })
 
 
 # ----- Parse Natural Language -----

db.py

@@ -387,6 +387,7 @@ def insert_default_data(conn):
     c.execute("INSERT OR IGNORE INTO settings (key, value) VALUES (?, ?)", ("llm_api_key", ""))
     c.execute("INSERT OR IGNORE INTO settings (key, value) VALUES (?, ?)", ("llm_api_model", ""))
     c.execute("INSERT OR IGNORE INTO settings (key, value) VALUES (?, ?)", ("nl_default_text", "用自然语言描述你想要的配置，支持多行输入。\n例如：\n用RTX 4090跑Llama-3-70B，上下文8192\n温度0.7，开启flash attention\n端口设为8080"))
+    c.execute("INSERT OR IGNORE INTO settings (key, value) VALUES (?, ?)", ("show_nl_section", "true"))
 
     conn.commit()
 

static/css/style.css

@@ -209,6 +209,8 @@ header h1 {
 .top-controls { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
 
 .control-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
+.control-group.control-group-small { flex: 0.5; min-width: 140px; }
+.control-group.control-group-large { flex: 2; min-width: 300px; }
 
 .control-group label { font-size: 0.85em; color: var(--text-dim); font-weight: 500; }
 

static/index.html

@@ -36,14 +36,14 @@
             <label>llama.cpp 版本</label>
             <select id="version-select" onchange="onVersionChange()"></select>
         </div>
-        <div class="control-group">
+        <div class="control-group control-group-large">
             <label>运行模式</label>
             <div class="mode-switch">
                 <button class="mode-btn active" data-mode="gpu" onclick="switchMode('gpu')">🎮 GPU 模式</button>
                 <button class="mode-btn" data-mode="gpu_cpu" onclick="switchMode('gpu_cpu')">🎮+💻 GPU+CPU 模式</button>
             </div>
         </div>
-        <div class="control-group">
+        <div class="control-group control-group-small">
             <label>二进制程序</label>
             <select id="binary-select">
                 <option value="llama-server">llama-server</option>
@@ -102,7 +102,7 @@
     </section>
 
     <!-- Natural Language Input -->
-    <section class="panel">
+    <section class="panel" id="nl-section">
         <h2>💬 自然语言生成</h2>
         <div class="nl-input-container">
             <textarea id="nl-input" rows="3" placeholder="加载中..."></textarea>

static/js/admin.js

@@ -307,6 +307,7 @@ function renderSettings() {
         'default_version': '默认版本',
         'default_mode': '默认模式',
         'default_quant': '默认量化版本',
+        'show_nl_section': '显示自然语言区域 (true/false)',
         'nl_default_text': '自然语言默认提示文本',
         'llm_enabled': '启用LLM解析 (true/false)',
         'llm_api_url': 'LLM API URL',
@@ -314,12 +315,40 @@ function renderSettings() {
         'llm_api_model': 'LLM 模型名',
         'llm_system_prompt': 'LLM 系统提示词',
     };
+    // Keys that use multi-line textarea
+    const textareaKeys = ['nl_default_text', 'llm_system_prompt'];
+    // Keys that use select with live data
+    const gpuSelectKeys = ['default_gpu'];
+    const versionSelectKeys = ['default_version'];
+    const modeSelectKeys = ['default_mode'];
+    // Keys that are boolean-like
+    const boolKeys = ['llm_enabled', 'show_nl_section'];
+
     document.getElementById('settings-form').innerHTML = Object.entries(adminState.settings).map(([key, value]) => {
         const label = labels[key] || key;
-        const isLong = key === 'llm_system_prompt';
-        if (isLong) {
+        // Textarea
+        if (textareaKeys.includes(key)) {
             return `<div class="setting-item setting-item-wide"><label>${label}</label><textarea rows="4" onchange="adminState.settings['${key}'] = this.value">${value}</textarea></div>`;
         }
+        // Select with GPU list
+        if (gpuSelectKeys.includes(key)) {
+            const opts = adminState.gpus.map(g => `<option value="${g.name}" ${value===g.name?'selected':''}>${g.name}</option>`).join('');
+            return `<div class="setting-item"><label>${label}</label><select onchange="adminState.settings['${key}'] = this.value">${opts}</select></div>`;
+        }
+        // Select with version list
+        if (versionSelectKeys.includes(key)) {
+            const opts = adminState.versions.map(v => `<option value="${v.version_tag}" ${value===v.version_tag?'selected':''}>${v.version_tag}</option>`).join('');
+            return `<div class="setting-item"><label>${label}</label><select onchange="adminState.settings['${key}'] = this.value">${opts}</select></div>`;
+        }
+        // Select with mode
+        if (modeSelectKeys.includes(key)) {
+            return `<div class="setting-item"><label>${label}</label><select onchange="adminState.settings['${key}'] = this.value"><option value="gpu" ${value==='gpu'?'selected':''}>GPU</option><option value="gpu_cpu" ${value==='gpu_cpu'?'selected':''}>GPU+CPU</option></select></div>`;
+        }
+        // Boolean
+        if (boolKeys.includes(key)) {
+            return `<div class="setting-item"><label>${label}</label><select onchange="adminState.settings['${key}'] = this.value"><option value="true" ${value==='true'?'selected':''}>是</option><option value="false" ${value==='false'?'selected':''}>否</option></select></div>`;
+        }
+        // Password or text
         const type = key === 'llm_api_key' ? 'password' : 'text';
         return `<div class="setting-item"><label>${label}</label><input type="${type}" value="${value}" onchange="adminState.settings['${key}'] = this.value"></div>`;
     }).join('');

static/js/main.js

@@ -29,6 +29,11 @@ async function loadNlDefaultText() {
     if (data.nl_default_text) {
         ta.placeholder = data.nl_default_text;
     }
+    // Show/hide natural language section
+    const nlSection = document.getElementById('nl-section');
+    if (nlSection) {
+        nlSection.classList.toggle('hidden', data.show_nl_section !== 'true');
+    }
 }
 
 // ===== Load Data =====
@@ -287,6 +292,19 @@ function isParamModified(p, val) {
 
 function setParam(key, value) {
     state.paramValues[key] = value;
+    // Update this item's visual state without full re-render (preserves focus)
+    const item = document.querySelector(`.param-item[data-key="${key}"]`);
+    if (item) {
+        const p = state.params.find(p => p.param_key === key);
+        if (p) {
+            item.classList.remove('param-empty', 'param-changed');
+            if (p.param_key === 'model' && (!value || String(value).trim() === '')) {
+                item.classList.add('param-empty');
+            } else if (isParamModified(p, value)) {
+                item.classList.add('param-changed');
+            }
+        }
+    }
     // If on 'modified' tab, re-render to update the list
     if (state.currentTab === 'modified') renderParams();
     generateCommand(); updateEstimate();