掌握 PageForge 扩展：从基础应用到深度开发

feature:
  switch:
    enable: true

!switch[开关文本]

!switch[默认开启的开关](true)
!switch[默认关闭的开关](false)

!switch[自定义开关]{focus:ring-purple-500 focus:ring-offset-2}

!switch[红色开关](true){bg-red-500 border-red-500}
!switch[绿色开关](true){bg-green-500 border-green-500}
!switch[紫色开关](true){bg-purple-500 border-purple-500}

!switch[焦点样式](true){focus:ring-green-500 focus:ring-offset-green-200}

前置文本!switch[内联开关](on)后置文本

!switch[夜间模式](true){bg-indigo-600 border-indigo-600 focus:ring-indigo-400}

## 用户设置

!switch[接收电子邮件通知](true)
!switch[启用双因素认证]
!switch[夜间模式]{bg-gray-700 border-gray-700}

## 高级功能

基础版：!switch[实时预览] !switch[自动保存]
专业版：!switch[实时预览](on) !switch[自动保存](on)

点击开关查看更多信息：!switch[详细内容]

const PageForgeSwitchExtension = {
    name: 'pageforgeSwitch',
    level: 'inline',

    start(src) {
        if (!config.feature?.switch?.enable) {
            return -1;
        }

        // 匹配 !switch[ 格式
        const pattern = /!switch\[/;
        const match = src.match(pattern);

        if (match) {
            // 检查是否在代码块内
            const beforeText = src.substring(0, match.index);
            const matches = beforeText.match(/`/g);
            if (matches && matches.length % 2 === 1) {
                return -1;
            }

            return match.index;
        }

        return -1;
    },

    tokenizer(src, tokens) {
        // 解析语法并生成token对象
        const rule = /^!switch\[(.*?)\](?:\((.*?)\))?(?:{(.*?)})?/;
        const match = rule.exec(src);

        if (match) {
            const [fullMatch, text, state, className] = match;
            const isChecked = state ? ['true', 'on', '1', 'yes'].includes(state.toLowerCase()) : false;

            return {
                type: 'pageforgeSwitch',
                raw: fullMatch,
                text: text,
                state: isChecked,
                className: className || '',
                tokens: []
            };
        }
        return false;
    },

    renderer(item) {
        // 调用模板渲染组件
        const switchComponent = loadComponent('switch', item);
        return item.prefix || item.suffix
            ? `${item.prefix || ''}${switchComponent}${item.suffix || ''}`
            : switchComponent;
    }
};

module.exports = function template(item) {
    // 基础样式：仅应用于容器
    const baseContainerStyles = "inline-flex items-center";
    
    // 解析开关状态
    const isChecked = item.state === true;
    
    // 用户提供的所有样式类
    const allUserStyles = item.className || "";
    
    // 分离颜色相关类和其他样式类
    const bgColorRegex = /\bbg-[a-z]+-[0-9]+\b/g;
    const borderColorRegex = /\bborder-[a-z]+-[0-9]+\b/g;
    
    // 提取用户定义的背景色和边框色
    const userBgColors = allUserStyles.match(bgColorRegex) || [];
    const userBorderColors = allUserStyles.match(borderColorRegex) || [];
    
    // 将颜色类从用户样式中移除，剩下的应用于label
    let remainingUserStyles = allUserStyles;
    
    // 移除背景色类和边框色类
    [...userBgColors, ...userBorderColors].forEach(colorClass => {
        remainingUserStyles = remainingUserStyles.replace(colorClass, '');
    });
    
    // 整理样式，移除多余空格
    remainingUserStyles = remainingUserStyles.replace(/\s+/g, ' ').trim();
    
    // 轨道默认样式和自定义样式处理
    // ...（样式处理代码）
    
    // HTML生成
    return `
        <div class="${baseContainerStyles}">
            <label for="${switchId}" class="flex items-center cursor-pointer ${focusStyles} ${remainingUserStyles}">
                <!-- 开关轨道和按钮结构 -->
                <div class="relative">
                    <input type="checkbox" id="${switchId}" class="sr-only" ${isChecked ? 'checked' : ''}>
                    <div class="block w-10 h-6 rounded-full border-2 transition ${trackStyles}"></div>
                    <div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform ${toggleStyles}"></div>
                </div>
                ${item.text ? `<span class="ml-3 text-sm font-medium">${item.text}</span>` : ''}
            </label>
        </div>
    `;
};

<div class="inline-flex items-center">
  <label for="switch-xyz123" class="flex items-center cursor-pointer focus:outline-none focus:ring-2 ...">
    <div class="relative">
      <!-- 真实的复选框，通过sr-only隐藏但保持可访问性 -->
      <input type="checkbox" id="switch-xyz123" class="sr-only" checked>
      <!-- 开关轨道 -->
      <div class="block w-10 h-6 rounded-full border-2 transition bg-blue-600 border-blue-600"></div>
      <!-- 开关按钮 -->
      <div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform translate-x-4 bg-white"></div>
    </div>
    <!-- 开关文本 -->
    <span class="ml-3 text-sm font-medium">开关文本</span>
  </label>
</div>