MediaWiki:Gadget-defaultsummaries.js

(() => {
    'use strict';

    // 摘要选项（保持你喜欢的第二套内容）
    const SUMMARY_OPTIONS = [
        '新条目',
        '修饰语句',
        '修正笔误',
        '内容扩充',
        '排版（调整格式）',
        '来源（增加/调整参考资料）',
        '内部链接（增加/调整）',
        '分类（增加/调整）',
        '消歧义',
        '维基化（适配维基格式）',
        '维护清理'
    ];

    // 新增：美化样式（圆角、阴影、间距等）
    const STYLES = {
        dropdownContainer: {
            width: '100%', // 占满宽度，避免选项换行
            margin: '8px 0', // 上下留白，与其他元素分隔
            fontSize: '0.95em' // 稍小字体，更精致
        },
        // 下拉菜单本身的样式（通过JS动态注入CSS）
        dropdown: `
            .summary-helper-dropdown .oo-ui-dropdownWidget-handle {
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 4px 10px;
                background: #f8f9fa;
                transition: all 0.2s;
            }
            .summary-helper-dropdown .oo-ui-dropdownWidget-handle:hover {
                border-color: #666;
                background: #f0f0f0;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }
            .summary-helper-dropdown .oo-ui-menuOptionWidget {
                padding: 5px 12px;
            }
            .summary-helper-dropdown .oo-ui-menuOptionWidget:hover {
                background: #eaf3ff; /* hover时浅蓝色背景 */
                color: #0645ad; /* 维基百科蓝，突出选中项 */
            }
            .summary-helper-dropdown .oo-ui-menuOptionWidget.oo-ui-selected {
                background: #dcebff; /* 选中时深蓝色背景 */
                font-weight: bold;
            }
        `
    };

    class SummaryHelper {
        constructor() {
            this.summaryBox = $('#wpSummary');
            this.initialized = false;
            this.init();
        }

        init() {
            if (this.initialized) return;
            // 新增：注入美化样式
            this.injectStyles();
            this.setupVisualEditorHook();
            this.setupWikiEditor();
            this.initialized = true;
        }

        // 新增：动态注入CSS样式（避免修改全局CSS）
        injectStyles() {
            const style = document.createElement('style');
            style.textContent = STYLES.dropdown;
            document.head.appendChild(style);
        }

        // 适配可视化编辑器（VE）
        setupVisualEditorHook() {
            mw.hook('ve.saveDialog.stateChanged').add(() => {
                if ($('body').hasClass('has-summary-dropdowns')) return;
                
                const target = ve.init.target;
                const $saveOptions = target.saveDialog.$saveOptions;
                this.summaryBox = target.saveDialog.editSummaryInput.$input;
                
                if (!$saveOptions.length) return;
                
                $('body').addClass('has-summary-dropdowns');
                $saveOptions.before(this.createDropdown());
            });
        }

        // 适配传统编辑器（WikiEditor）
        setupWikiEditor() {
            Promise.all([
                mw.loader.using('oojs-ui-core'),
                $.ready
            ]).then(() => {
                const $editCheckboxes = $('.editCheckboxes');
                if (!$editCheckboxes.length) return;
                
                $editCheckboxes.before(
                    this.createDropdown().css(STYLES.dropdownContainer)
                );
            });
        }

        // 创建下拉菜单（增加自定义类名用于美化）
        createDropdown() {
            const dropdown = new OO.ui.DropdownWidget({
                label: '快捷摘要选项', // 更简洁的标题
                classes: ['summary-helper-dropdown'] // 新增：自定义类名，用于绑定样式
            });

            dropdown.menu.on('select', this.handleSummarySelect.bind(this));
            this.addOptionsToDropdown(dropdown, SUMMARY_OPTIONS);

            return dropdown.$element;
        }

        addOptionsToDropdown(dropdown, optionTexts) {
            dropdown.menu.addItems(
                optionTexts.map(text => new OO.ui.MenuOptionWidget({ label: text }))
            );
        }

        // 优化：添加选中后的视觉反馈（短暂高亮输入框）
        handleSummarySelect(option) {
            const originalValue = this.summaryBox.val();
            const newSummary = originalValue.length && !originalValue.endsWith(' ') 
                ? `${originalValue} ${option.getLabel()}`
                : originalValue + option.getLabel();
            
            this.summaryBox.val(newSummary).trigger('change');
            
            // 新增：选中后高亮输入框0.5秒，提示用户已填充
            this.summaryBox.css('box-shadow', '0 0 0 2px #b3d4fc');
            setTimeout(() => {
                this.summaryBox.css('box-shadow', '');
            }, 500);
        }
    }

    $(() => new SummaryHelper());
})();