Function renderModeConfig

webdev/src/ui-renderer.ts:133–195

(
    containerId: string,
    currentMode: RunMode,
    onSwitch: SwitchModeHandler,
)

 * 显示当前运行模式，提供切换按钮，并附上两种模式的说明
 */
export function renderModeConfig(
    containerId: string,
    currentMode: RunMode,
    onSwitch: SwitchModeHandler,
): void {
    const el = document.getElementById(containerId);
    if (!el) return;

    // 两种模式的名称（从 i18n 获取）
    const modeNames: Record<RunMode, string> = {
        compatible: t('compatibleMode'),
        builtin: t('builtinMode'),
    };

    // 构建整个模式配置页面的 HTML
    el.innerHTML = `
        <!-- 当前模式状态卡片 -->
        <div class="groupbox">
            <span class="groupbox-title">${t('currentMode')}</span>
            <div class="mode-status">
                <span class="mode-badge ${currentMode}">${modeNames[currentMode]}</span>
                <span class="mode-desc">${t('modeDesc')}</span>
            </div>
            <button class="mode-switch-btn" id="switchModeBtn">
                ${t('switchTo')}${currentMode === 'compatible' ? t('builtinMode') : t('compatibleMode')}
            </button>
            <p class="mode-hint">${t('modeHint')}</p>
        </div>

        <!-- 两种模式的详细说明 -->
        <div class="groupbox">
            <span class="groupbox-title">${t('modeExplain')}</span>
            <div class="mode-explain">
                <div class="mode-explain-item">
                    <h4>${t('compatibleTitle')}</h4>
                    <p>
                        ${t('compatibleDesc')}<br>
                        <strong>${t('compatibleSuitable')}</strong>${t('compatibleSuitableVal')}<br>
                        <strong>${t('compatibleFeature')}</strong>${t('compatibleFeatureVal')}
                    </p>
                </div>
                <div class="mode-explain-item">
                    <h4>${t('builtinTitle')}</h4>
                    <p>
                        ${t('builtinDesc')}<br>
                        <strong>${t('compatibleSuitable')}</strong>${t('builtinSuitableVal')}<br>
                        <strong>${t('compatibleFeature')}</strong>${t('builtinFeatureVal')}
                    </p>
                </div>
            </div>
        </div>
    `;

    // 绑定切换按钮的点击事件
    const switchBtn = document.getElementById('switchModeBtn');
    if (switchBtn) {
        switchBtn.onclick = () => {
            // 计算切换后的新模式