插件设置项组件

开关

PanelSwitch —— .switch-item.tip_new_both 里放一个 .switch，开启状态加 on：

<div class="switch-item tip_new_both">
    <div>
        <span class="set_text"><big>标题 &nbsp;</big><br></span>
        <span class="set_text set_text_desc"><small>描述</small></span>
    </div>
    <div class="switch" id="your_switch"></div>
</div>

描述可以有多行，每行都要 .set_text.set_text_desc

滑块

PanelSlider —— 行容器改用 .tip_new_slider，右侧是 .slider-container：

<div class="tip_new_both tip_new_slider">
    <div>
        <span class="set_text"><big>标题 &nbsp;</big><br></span>
        <span class="set_text set_text_desc"><small>描述</small></span>
    </div>
    <div class="slider-container">
        <input type="range" class="slider" id="your_slider" min="0" max="100"
               style="--slider-progress: 50%;">
        <span class="slider-value" data-slider="your_slider">50</span>
    </div>
</div>

纯文字

PanelText：

<div class="set_tip set_tip_new panel_text_block">
    <span class="set_text_wallpaper">说明文字</span>
</div>

一行文字按钮

PanelTextButton（variant="plain"）—— 左侧标题、右侧一个带文字的按钮（e.g.插件设置进入）：

<div class="entry-pluginSettings set_tip">
    <span class="set_text">标题</span>
    <div class="panel_btn_text" id="your_entry">按钮文字</div>
</div>

卡片式文字按钮

PanelTextButton（variant="card"）—— 标题与描述在上、按钮在下（e.g.数据备份）

<div class="data_backup_tip set_tip">
    <div>
        <span class="set_text"><big>标题&nbsp;</big><br></span>
        <span class="set_text set_text_desc"><small>描述</small></span>
    </div>
    <div class="but-ordinary" id="your_action">按钮文字</div>
</div>

一行外链

PanelLink：

<div class="set_tip_about">
    <a class="text_hover about-link" href="https://example.com" target="_blank" rel="noopener">
        <span class="set_text">链接文字</span>
        <span class="iconfont icon-link"></span>
    </a>
</div>

等宽按钮行

PanelButton —— 一行里并排的等宽按钮（新增 / 重置 / 保存 / 取消这类），每个按钮占 25% 宽：

<div class="panel_list_actions_row">
    <div class="panel_btn"><span class="set_quick_text">新增</span></div>
    <div class="panel_btn"><span class="set_quick_text">重置</span></div>
</div>

可折叠块

PanelFold —— 标题 + 折叠按钮 + 内容，展开高度自动获取

<div class="panel_fold">
    <div class="panel_fold_header">
        <h3>标题</h3>
        <button class="panel_fold_toggle" type="button">
            <i class="iconfont icon-unfolding"></i>
        </button>
    </div>
    <div class="panel_fold_body expanded" style="max-height: 0px;">
        <!-- 内容 -->
    </div>
</div>

表单

PanelForm + PanelFormRow + PanelFormActions：

<div class="add_content">
    <div class="froms">
        <div class="from_items">
            <div class="from_text">标签</div>
            <input type="text" id="your_input">
        </div>
    </div>
    <div class="from_items button">
        <div class="panel_btn"><span class="set_quick_text">保存</span></div>
        <div class="panel_btn"><span class="set_quick_text">取消</span></div>
    </div>
</div>

.add_content 自带定高与滚动，按钮行固定在底部。