Function _renderProtoOptionForm

frontend/js/plugins.js:501–551

(paramKey, currentVal)

// 渲染 protocol_option 内嵌表单（分组布局，与协议预设界面一致）
function _renderProtoOptionForm(paramKey, currentVal) {
    const cur = (currentVal && typeof currentVal === 'object') ? currentVal : {};
    const sel = (k, v) => cur[k] !== undefined && String(cur[k]) === v ? 'selected' : '';
    const selEmpty = k => cur[k] === undefined || cur[k] === '' ? 'selected' : '';
    const inCls = 'w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-white text-xs focus:outline-none focus:border-primary/50';
    const pk = escHtml(paramKey);

    const makeSelect = (f) => `
        <select id="${f.id}" class="${inCls}" style="color:white;" onchange="_syncProtoForm('${pk}')">
            <option value="" ${selEmpty(f.key)}>默认</option>
            ${f.opts.map(([v, l]) => `<option value="${v}" ${sel(f.key, v)}>${l}</option>`).join('')}
        </select>`;
    const makeInput = (f) => `
        <input type="${f.type}" id="${f.id}" value="${escHtml(String(cur[f.key] ?? ''))}" placeholder="默认"
            class="${inCls}" oninput="_syncProtoForm('${pk}')">`;

    const groupsHtml = _PROTO_GROUPS.map(g => {
        const colCls = `grid grid-cols-${g.cols} gap-2`;
        const fieldsHtml = g.fields.map(f => `
            <div>
                <label class="block text-white/60 text-[11px] mb-0.5">${f.label}</label>
                ${f.type === 'select' ? makeSelect(f) : makeInput(f)}
            </div>`).join('');
        return `
        <div class="bg-white/5 rounded-lg p-3">
            <div class="text-white/70 text-xs font-semibold mb-2 border-b border-white/10 pb-1">${g.title}</div>
            <div class="${colCls}">${fieldsHtml}</div>
        </div>`;
    }).join('');

    return `
    <div class="mt-2 border border-white/10 rounded-lg overflow-hidden">
        <!-- 工具栏 -->
        <div class="flex gap-2 px-3 py-2 bg-white/5 border-b border-white/10">
            <button type="button" onclick="_poLoadDefault('${pk}')"
                class="text-xs px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/80 transition-colors">
                <i class="fa fa-magic mr-1"></i>加载默认
            </button>
            <button type="button" onclick="_poLoadPreset('${pk}')"
                class="text-xs px-2 py-1 rounded bg-primary/30 hover:bg-primary/50 text-white transition-colors">
                <i class="fa fa-list mr-1"></i>从预设加载
            </button>
            <button type="button" onclick="_poClear('${pk}')"
                class="text-xs px-2 py-1 rounded bg-red-500/20 hover:bg-red-500/30 text-red-400 transition-colors">
                <i class="fa fa-eraser mr-1"></i>清空
            </button>
        </div>
        <!-- 分组内容 -->
        <div class="space-y-2 p-3">${groupsHtml}</div>
    </div>`;
}

// 表单任意字段变化后同步回 _editParams
function _syncProtoForm(paramKey) {