{#if form.templateSupport} { updateNodeDataByEvent(form.name,e) }} /> {:else}

{
                                updateNodeDataByEvent(form.name,e)
                            }}
                        />
                    {/if}
                </div>
            {:else if form.type === 'slider'}
                <div class="setting-title">{form.label}</div>
                <div class="setting-item">
                    <div class="slider-container">
                        <span>{form.description}: {data[form.name] ?? form.defaultValue}</span>
                        <input
                            class="nodrag"
                            type="range"
                            {...form.attrs}
                            value={data[form.name] ?? form.defaultValue}
                            oninput={(e) => updateNodeData({ [form.name]: parseFloat(e.target.value) })}
                        />
                    </div>
                </div>
            {:else if form.type === 'select'}
                <div class="setting-title">{form.label}</div>
                <div class="setting-item">
                    <Select items={form.options||[]} style="width: 100%" placeholder={form.placeholder} onSelect={(item)=>{
                      const newValue = item.value;
                      updateNodeData({
                              [form.name]: newValue
                      })
                }} value={data[form.name] ? [data[form.name]] : [form.defaultValue]} />
                </div>
            {:else if form.type === 'chosen'}
                <div class="setting-title">{form.label}</div>
                <div class="setting-item">
                    <Chosen style="width: 100%" placeholder={form.placeholder}
                            buttonText={form.chosen?.buttonText} onChosen={(value,label,event)=>{
                        form.chosen?.onChosen?.(updateNodeData,value,label,event);
                    }} value={data[form.chosen?.valueDataKey||""]} label={data[form.chosen?.labelDataKey||""]} />
                </div>
            {:else if form.type === 'heading'}
                <Heading level={3} mt="10px" {...form.attrs}>{form.label}</Heading>
            {/if}
        {/each}
    {/if}

{#if customNode.outputDefsEnable !== false}
        <div class="heading">
            <Heading level={3} mt="10px">输出参数</Heading>

{#if customNode.outputDefsAddEnable !== false}
                <Button class="input-btn-more" style="margin-left: auto" onclick={()=>{
                    addParameter(currentNodeId,'outputDefs')
                }}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
                    </svg>
                </Button>
            {/if}
        </div>
        <OutputDefList />
    {/if}

</NodeWrapper>

.setting-title {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
        margin-top: 10px;
    }

.setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        gap: 10px;
    }

/* 新增样式 */
    .slider-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.slider-container span {
        font-size: 12px;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

input[type="range"] {
        width: 100%;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        outline: none;
        -webkit-appearance: none;
    }

input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        background: #007bff;
        border-radius: 50%;
        cursor: pointer;
    }
</style>