[js] [css] 全链路 Callout (提示块) 中文化 && 样式分享

Callout (提示块)中文化（内容区 + 两种菜单 + 编辑弹窗强同步）

1、斜杠 ‘/’ 菜单翻译

2、内容区域翻译

3、修改类型翻译

// custom.js - 全链路 Callout 中文化（内容区 + 两种菜单 + 编辑弹窗强同步）
(function () {
    const translations = {
        "Note": "信息补充",
        "Tip": "提示",
        "Important": "重要",
        "Warning": "警告",
        "Caution": "问题"
    };

    const defaultTitles = {
        "NOTE": "Note",
        "TIP": "Tip",
        "IMPORTANT": "Important",
        "WARNING": "Warning",
        "CAUTION": "Caution"
    };

    const menuButtonIds = {
        "NOTE": "calloutNote",
        "TIP": "calloutTip",
        "IMPORTANT": "calloutImportant",
        "WARNING": "calloutWarning",
        "CAUTION": "calloutCaution"
    };

    // === 通用翻译函数：安全更新匹配的 span ===
    function translateCalloutSpans(spans) {
        spans.forEach(span => {
            const original = span.textContent.trim();
            if (translations[original]) {
                span.textContent = translations[original];
            }
        });
    }

    // === 1. 内容区 Callout 标题更新（节流 + 直接匹配英文文本）===
    let contentUpdateTimer = null;
    function updateCalloutTitlesInContent() {
        if (contentUpdateTimer) return;
        contentUpdateTimer = setTimeout(() => {
            document.querySelectorAll('.callout[data-subtype] .callout-title').forEach(titleEl => {
                const text = titleEl.textContent.trim();
                if (translations[text]) {
                    titleEl.textContent = translations[text];
                }
            });
            contentUpdateTimer = null;
        }, 60);
    }

    // === 2. 菜单项更新（支持两类结构）===
    function updateCalloutMenuItems() {
        // 类型 A: 工具栏按钮（如侧边栏）
        Object.values(menuButtonIds).forEach(dataId => {
            const button = document.querySelector(`button[data-id="${dataId}"]`);
            if (!button) return;
            const colorSpan = button.querySelector('.b3-list-item__text span[style*="--b3-callout"]');
            if (colorSpan) {
                translateCalloutSpans([colorSpan]);
            }
        });

        // 类型 B: 下拉/右键菜单（data-name="callout-select"）
        const selectMenu = document.querySelector('.b3-menu[data-name="callout-select"]');
        if (selectMenu) {
            const spans = selectMenu.querySelectorAll('.b3-menu__label > span[style*="--b3-callout"]');
            translateCalloutSpans(spans);
        }
    }

    // === 3. Callout 编辑弹窗：强制同步标题为中文默认值 ===
    function updateCalloutEditDialog() {
        document.querySelectorAll('.b3-dialog__content').forEach(dialog => {
            const typeInput = dialog.querySelector('input.b3-form__icona-input'); // 类型输入框
            const titleInput = dialog.querySelector('input.b3-text-field.fn__flex-1[type="text"]'); // 标题输入框

            if (!typeInput || !titleInput) return;

            const calloutType = typeInput.value; // e.g., "CAUTION"
            const englishTitle = defaultTitles[calloutType]; // e.g., "Caution"
            const chineseTitle = englishTitle ? translations[englishTitle] : null;

            if (chineseTitle !== null) {
                titleInput.value = chineseTitle; // 强制设为中文（覆盖用户旧值）
            }
        });
    }

    // === 合并 DOM 变更处理（区分策略）===
    function onDomChange() {
        updateCalloutTitlesInContent();   // 节流
        updateCalloutMenuItems();         // 即时
        updateCalloutEditDialog();        // 即时，强同步
    }

    // === 初始执行 ===
    updateCalloutTitlesInContent();
    updateCalloutMenuItems();
    updateCalloutEditDialog();

    // === 监听整个页面的动态变化 ===
    const observer = new MutationObserver(onDomChange);
    observer.observe(document.body, { childList: true, subtree: true });
})();

Callout（提示块） 样式

/* === 通用 callout 样式 === */
.callout {
    display: block;
    border-radius: 6px;
    padding: 10px 16px;
    margin: 8px 0;
    position: relative;
    background-color: white !important;
    color: var(--b3-theme-on-background);
    border-left: none !important;
    box-shadow: none !important;
}

/* === Note —— 蓝色系 === */
.callout[data-subtype="NOTE"] {
    border-left: 0.25em solid #1f6feb !important;
    background-color: rgba(247, 250, 255, 0.8) !important;
}
.callout[data-subtype="NOTE"] .callout-info {
    color: #1f6feb;
}

/* === Tip —— 绿色系 === */
.callout[data-subtype="TIP"] {
    border-left: 0.25em solid #238636 !important;
    background-color: rgba(238, 250, 240, 0.8) !important;
}
.callout[data-subtype="TIP"] .callout-info {
    color: #238636;
}

/* === IMPORTANT —— 全新紫色系 (#9E75E7) === */
.callout[data-subtype="IMPORTANT"] {
    border-left: 0.25em solid #9E75E7 !important;
    background-color: rgba(158, 117, 231, 0.12) !important; /* 浅紫背景 */
}
.callout[data-subtype="IMPORTANT"] .callout-info {
    color: #9E75E7;
}

/* === Warning —— 橙色系（可选：也可改为独立色）=== */
.callout[data-subtype="WARNING"] {
    border-left: 0.25em solid #e3b341 !important;
    background-color: rgba(255, 250, 235, 0.8) !important;
}
.callout[data-subtype="WARNING"] .callout-info {
    color: #e3b341;
}

/* === Caution —— 红色系 === */
.callout[data-subtype="CAUTION"] {
    border-left: 0.25em solid #d1242f !important;
    background-color: rgba(255, 240, 240, 0.8) !important;
}
.callout[data-subtype="CAUTION"] .callout-info {
    color: #d1242f;
}

/* === 移除默认 ::before 竖线 === */
.callout:before {
    background: transparent !important;
    width: 0 !important;
}