renderToolSelectionList()

in spring-ai-alibaba-jmanus/src/main/resources/static/admin/js/admin-ui.js [702:782]

• 70 lines of code
• 4 McCabe index (conditional complexity)

    renderToolSelectionList(container, groupedTools) {
        let html = '';
        
        // 添加排序和过滤选项
        html += `
            <div class="tool-sort-options">
                <div class="sort-filter-row">
                    <label>排序方式：</label>
                    <select class="tool-sort-select">
                        <option value="group">按服务组排序</option>
                        <option value="name">按名称排序</option>
                        <option value="enabled">按启用状态排序</option>
                    </select>
                </div>
               
            </div>
        `;
        
        // 添加工具组计数统计
        const totalGroups = Object.keys(groupedTools).length;
        const totalTools = Object.values(groupedTools).reduce((sum, tools) => sum + tools.length, 0);
        
        html += `
            <div class="tool-summary">
                <span class="summary-text">共 ${totalGroups} 个服务组，${totalTools} 个工具</span>
            </div>
        `;
        
        // 遍历每个组
        Object.keys(groupedTools).sort().forEach((group, index) => {
            const tools = groupedTools[group];
            const enabledTools = tools.filter(tool => tool.isSelected).length;
            
            // 添加组标题，默认除第一个外都是收起状态
            const isCollapsed = index > 0 ? 'collapsed' : '';
            
            html += `
                <div class="tool-group">
                    <div class="tool-group-header" data-group="${group}" ${isCollapsed ? 'class="' + isCollapsed + '"' : ''}>
                        <div class="group-title-area">
                            <span class="group-icon">📁</span>
                            <span class="group-name">${group}</span>
                            <span class="group-count">(${enabledTools}/${tools.length})</span>
                        </div>
                        <div class="group-actions">
                            <label class="group-enable-all">
                                <input type="checkbox" class="group-enable-checkbox" ${enabledTools === tools.length ? 'checked' : ''}>
                                <span class="enable-label">启用全部</span>
                            </label>
                        </div>
                    </div>
                    <div class="tool-group-content ${isCollapsed}">
            `;
            
            // 添加该组下的所有工具
            tools.forEach(tool => {
                html += `
                    <div class="tool-selection-item" data-tool-key="${tool.key}" data-group="${group}">
                        <div class="tool-info">
                            <div class="tool-selection-name">${tool.name || tool.key}</div>
                            ${tool.description ? `<div class="tool-selection-desc">${tool.description}</div>` : ''}
                        </div>
                        <div class="tool-actions">
                            <label class="tool-enable-switch" title="${tool.isSelected ? '已启用' : '已禁用'}">
                                <input type="checkbox" class="tool-enable-checkbox" ${tool.isSelected ? 'checked' : ''}>
                                <span class="tool-enable-slider"></span>
                            </label>
                        </div>
                    </div>
                `;
            });
            
            // 关闭组容器
            html += `
                    </div>
                </div>
            `;
        });
        
        container.innerHTML = html;
    }