raintee-maputils 1.0.35 → 1.0.36

package/dist/index.js

@@ -6561,13 +6561,14 @@ class RulerControl {
 
 class CustomOptionsControl {
     constructor(args) {
-        const { title, options, onConfirm } = args;
+        const { title, options, onConfirm, icon } = args;
 
         this._map = null;
         this._container = null;
 
+        this._title = title || '';
         this._options = options || [];
-        this._title = title || '标题';
+        this._icon = icon || null;
         this._onConfirm = onConfirm || (() => { });
         this._originalOptions = [...this._options];
         this._selectedOptions = [];
@@ -6580,119 +6581,450 @@ class CustomOptionsControl {
         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-options-control';
 
         const mainButton = document.createElement('button');
-        mainButton.textContent = this._title;
         mainButton.style.cssText = `
-            padding: 4px 8px;
+            padding: 0;
             background: white;
-            border: 1px solid #ccc;
+            border: 0.0625rem solid #ccc;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.375rem;
         `;
 
+        if (this._icon) {
+            const iconWrapper = document.createElement('span');
+            iconWrapper.style.cssText = `
+                width: 1rem;
+                height: 1rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            `;
+
+            if (this._icon.trim().startsWith('<svg')) {
+                iconWrapper.innerHTML = this._icon;
+            } else {
+                const img = document.createElement('img');
+                img.src = this._icon;
+                img.style.cssText = `width: 1rem; height: 1rem; object-fit: contain;`;
+                iconWrapper.appendChild(img);
+            }
+
+            mainButton.appendChild(iconWrapper);
+        }
+
         mainButton.addEventListener('click', () => {
             this._showModal();
         });
 
         this._container.appendChild(mainButton);
+
+        // 添加全局样式
+        this._addGlobalStyles();
+
         return this._container;
     }
 
-    /** 创建遮罩弹窗 */
+    _addGlobalStyles() {
+        if (document.querySelector('#custom-options-styles')) return;
+
+        const styles = document.createElement('style');
+        styles.id = 'custom-options-styles';
+        styles.textContent = `
+            @keyframes modalSlideIn {
+                from {
+                    opacity: 0;
+                    transform: scale(0.95) translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: scale(1) translateY(0);
+                }
+            }
+            
+            @keyframes modalBackdropFadeIn {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+            
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            
+            .custom-modal-overlay {
+                animation: modalBackdropFadeIn 0.2s ease-out;
+            }
+            
+            .custom-modal {
+                animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            }
+            
+            .custom-search-input:focus {
+                border-color: #667eea !important;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+            }
+            
+            .custom-checkbox {
+                position: relative;
+                appearance: none;
+                width: 1rem;
+                height: 1rem;
+                border: 2px solid #d1d5db;
+                border-radius: 0.25rem;
+                background: white;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                margin-right: 0.75rem;
+            }
+            
+            .custom-checkbox:checked {
+                background: linear-gradient(135deg, #667eea, #764ba2);
+                border-color: #667eea;
+            }
+            
+            .custom-checkbox:checked::after {
+                content: '✓';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: white;
+                font-size: 0.75rem;
+                font-weight: bold;
+            }
+            
+            .custom-checkbox:hover {
+                border-color: #667eea;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            }
+            
+            .custom-list-item {
+                transition: all 0.2s ease;
+            }
+            
+            .custom-list-item:hover {
+                background-color: #f8fafc !important;
+                border-color: #e2e8f0 !important;
+                transform: translateX(4px) !important;
+            }
+            
+            .custom-modal::-webkit-scrollbar {
+                width: 6px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-track {
+                background: #f1f5f9;
+                border-radius: 3px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-thumb {
+                background: linear-gradient(135deg, #667eea, #764ba2);
+                border-radius: 3px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-thumb:hover {
+                background: linear-gradient(135deg, #5a67d8, #6b46c1);
+            }
+        `;
+        document.head.appendChild(styles);
+    }
+
     _showModal() {
-        // 创建遮罩层
         this._overlay = document.createElement('div');
         this._overlay.className = 'custom-modal-overlay';
         this._overlay.style.cssText = `
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 9999;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            -webkit-backdrop-filter: blur(4px);
+            z-index: 10000;
             display: flex;
             justify-content: center;
             align-items: center;
+            padding: 1rem;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         `;
 
-        // 弹窗容器
         this._modal = document.createElement('div');
         this._modal.className = 'custom-modal';
         this._modal.style.cssText = `
-            width: 360px;
+            width: 100%;
+            max-width: 26rem;
             max-height: 80vh;
+            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: 0.75rem;
+            box-shadow: 
+                0 20px 25px -5px rgba(0, 0, 0, 0.1),
+                0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.8);
             overflow: hidden;
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
             display: flex;
             flex-direction: column;
         `;
 
-        // 搜索框
+        // 创建头部
+        const header = this._createHeader();
+        this._modal.appendChild(header);
+
+        // 创建搜索区域
+        const searchSection = this._createSearchSection();
+        this._modal.appendChild(searchSection);
+
+        // 创建选项列表
+        this._listBox = document.createElement('div');
+        this._listBox.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            padding: 0 1.25rem 1.25rem 1.25rem;
+            min-height: 10rem;
+        `;
+        this._modal.appendChild(this._listBox);
+
+        // 创建底部按钮
+        const footer = this._createFooter();
+        this._modal.appendChild(footer);
+
+        this._overlay.appendChild(this._modal);
+        document.body.appendChild(this._overlay);
+
+        // 聚焦搜索框
+        // setTimeout(() => {
+        //     const searchInput = this._modal.querySelector('.custom-search-input');
+        //     if (searchInput) {
+        //         searchInput.focus();
+        //     }
+        // }, 100);
+
+        // 点击遮罩关闭
+        this._overlay.addEventListener('click', (e) => {
+            if (e.target === this._overlay) {
+                this._closeModal();
+            }
+        });
+
+        // ESC 键关闭
+        this._handleKeydown = (e) => {
+            if (e.key === 'Escape') {
+                this._closeModal();
+            }
+        };
+        document.addEventListener('keydown', this._handleKeydown);
+
+        this._renderList('');
+    }
+
+    _createHeader() {
+        const header = document.createElement('div');
+        header.style.cssText = `
+            padding: 1.25rem 1.25rem 1rem 1.25rem;
+            border-bottom: 1px solid #e2e8f0;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        `;
+
+        const title = document.createElement('h2');
+        title.textContent = this._title;
+        title.style.cssText = `
+            margin: 0 0 0.5rem 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #1e293b;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        `;
+
+        // 添加图标
+        const icon = document.createElement('span');
+        icon.innerHTML = '📋';
+        icon.style.fontSize = '1.25rem';
+        title.insertBefore(icon, title.firstChild);
+
+        const subtitle = document.createElement('p');
+        subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
+        subtitle.style.cssText = `
+            margin: 0;
+            font-size: 0.8125rem;
+            color: #64748b;
+        `;
+
+        const closeBtn = document.createElement('button');
+        closeBtn.innerHTML = '✕';
+        closeBtn.style.cssText = `
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            width: 1.75rem;
+            height: 1.75rem;
+            border: none;
+            background: #f1f5f9;
+            color: #64748b;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            font-weight: 500;
+        `;
+        closeBtn.addEventListener('mouseenter', () => {
+            closeBtn.style.background = '#ef4444';
+            closeBtn.style.color = 'white';
+            closeBtn.style.transform = 'rotate(90deg)';
+        });
+        closeBtn.addEventListener('mouseleave', () => {
+            closeBtn.style.background = '#f1f5f9';
+            closeBtn.style.color = '#64748b';
+            closeBtn.style.transform = 'rotate(0deg)';
+        });
+        closeBtn.addEventListener('click', () => this._closeModal());
+
+        header.style.position = 'relative';
+        header.appendChild(title);
+        header.appendChild(subtitle);
+        header.appendChild(closeBtn);
+
+        return header;
+    }
+
+    _createSearchSection() {
+        const section = document.createElement('div');
+        section.style.cssText = `
+            padding: 1.25rem 1.25rem 1rem 1.25rem;
+        `;
+
+        const searchContainer = document.createElement('div');
+        searchContainer.style.cssText = `
+            position: relative;
+        `;
+
+        const searchIcon = document.createElement('div');
+        searchIcon.innerHTML = '🔍';
+        searchIcon.style.cssText = `
+            position: absolute;
+            left: 0.875rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 0.875rem;
+            color: #94a3b8;
+            pointer-events: none;
+        `;
+
         const searchInput = document.createElement('input');
         searchInput.placeholder = '搜索选项...';
         searchInput.className = 'custom-search-input';
         searchInput.style.cssText = `
             width: 100%;
-            padding: 8px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            margin-bottom: 12px;
+            padding: 0.75rem 1rem 0.75rem 2.5rem;
+            border: 2px solid #e2e8f0;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            background: white;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+            font-family: inherit;
+            outline: none;
         `;
+
+        searchInput.addEventListener('focus', () => {
+            searchInput.style.borderColor = '#667eea';
+            searchInput.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.1)';
+        });
+
+        searchInput.addEventListener('blur', () => {
+            searchInput.style.borderColor = '#e2e8f0';
+            searchInput.style.boxShadow = 'none';
+        });
+
         searchInput.addEventListener('input', (e) => {
             this._renderList(e.target.value);
         });
 
-        this._modal.appendChild(searchInput);
+        searchContainer.appendChild(searchIcon);
+        searchContainer.appendChild(searchInput);
+        section.appendChild(searchContainer);
 
-        // 列表区域
-        this._listBox = document.createElement('div');
-        this._listBox.style.cssText = `
-            flex: 1;
-            overflow-y: auto;
-            padding-right: 4px;
-        `;
-        this._modal.appendChild(this._listBox);
+        return section;
+    }
 
-        // 底部按钮
+    _createFooter() {
         const footer = document.createElement('div');
         footer.style.cssText = `
-            margin-top: 12px;
+            padding: 1rem 1.25rem;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-top: 1px solid #e2e8f0;
             display: flex;
             justify-content: flex-end;
-            gap: 8px;
+            gap: 0.75rem;
         `;
 
         const cancelBtn = document.createElement('button');
         cancelBtn.textContent = '取消';
         cancelBtn.style.cssText = `
-            padding: 6px 12px;
-            background: #ccc;
-            border: none;
-            border-radius: 4px;
+            padding: 0.5rem 1rem;
+            background: white;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151;
+            transition: all 0.2s ease;
+            font-family: inherit;
         `;
+        cancelBtn.addEventListener('mouseenter', () => {
+            cancelBtn.style.borderColor = '#ef4444';
+            cancelBtn.style.color = '#ef4444';
+            cancelBtn.style.transform = 'translateY(-1px)';
+        });
+        cancelBtn.addEventListener('mouseleave', () => {
+            cancelBtn.style.borderColor = '#d1d5db';
+            cancelBtn.style.color = '#374151';
+            cancelBtn.style.transform = 'translateY(0)';
+        });
         cancelBtn.addEventListener('click', () => this._closeModal());
 
         const okBtn = document.createElement('button');
         okBtn.textContent = '确定';
         okBtn.style.cssText = `
-            padding: 6px 12px;
+            padding: 0.5rem 1rem;
             background: #007cba;
             color: white;
             border: none;
-            border-radius: 4px;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            font-family: inherit;
+            box-shadow: 0 2px 4px rgba(0, 124, 186, 0.2);
         `;
+        okBtn.addEventListener('mouseenter', () => {
+            okBtn.style.background = '#005a87';
+            okBtn.style.transform = 'translateY(-1px)';
+            okBtn.style.boxShadow = '0 4px 8px rgba(0, 124, 186, 0.3)';
+        });
+        okBtn.addEventListener('mouseleave', () => {
+            okBtn.style.background = '#007cba';
+            okBtn.style.transform = 'translateY(0)';
+            okBtn.style.boxShadow = '0 2px 4px rgba(0, 124, 186, 0.2)';
+        });
         okBtn.addEventListener('click', () => this._confirm());
 
         footer.appendChild(cancelBtn);
         footer.appendChild(okBtn);
-        this._modal.appendChild(footer);
-
-        this._overlay.appendChild(this._modal);
-        document.body.appendChild(this._overlay);
-
-        // 初始化列表
-        this._renderList('');
+        return footer;
     }
 
-    /** 搜索过滤 */
     _renderList(keyword) {
         this._listBox.innerHTML = '';
 
@@ -6706,53 +7038,126 @@ class CustomOptionsControl {
 
         if (list.length === 0) {
             const empty = document.createElement('div');
-            empty.textContent = `未找到相关结果`;
-            empty.style.textAlign = 'center';
-            empty.style.padding = '20px';
+            empty.style.cssText = `
+                text-align: center;
+                padding: 2.5rem 1rem;
+                color: #94a3b8;
+            `;
+            empty.innerHTML = `
+                <div style="font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6;">🔍</div>
+                <div style="font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; color: #64748b;">未找到相关结果</div>
+                <div style="font-size: 0.8125rem;">尝试使用其他关键词搜索</div>
+            `;
             this._listBox.appendChild(empty);
             return;
         }
 
-        list.forEach((opt) => {
+        // 添加选项统计
+        const stats = document.createElement('div');
+        stats.style.cssText = `
+            padding: 0.5rem 0;
+            font-size: 0.8125rem;
+            color: #64748b;
+            border-bottom: 1px solid #f1f5f9;
+            margin-bottom: 0.5rem;
+        `;
+        stats.textContent = `找到 ${list.length} 个相关选项`;
+        this._listBox.appendChild(stats);
+
+        list.forEach((opt, index) => {
             const item = document.createElement('label');
+            item.className = 'custom-list-item';
             item.style.cssText = `
                 display: flex;
                 align-items: center;
-                padding: 6px 0;
+                padding: 0.75rem;
                 cursor: pointer;
+                border-radius: 0.5rem;
+                margin-bottom: 0.375rem;
+                transition: all 0.2s ease;
+                border: 2px solid transparent;
+                background: white;
+                position: relative;
+                overflow: hidden;
             `;
 
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
+            checkbox.className = 'custom-checkbox';
             checkbox.value = opt.value;
             checkbox.checked = this._selectedOptions.includes(opt.value);
-            checkbox.style.marginRight = '8px';
-            checkbox.addEventListener('change', () => this._toggle(opt.value));
+            checkbox.style.marginRight = '0.75rem';
 
             const labelSpan = document.createElement('span');
             labelSpan.innerHTML = this._highlight(opt.label, keyword);
+            labelSpan.style.cssText = `
+                flex: 1;
+                font-size: 0.875rem;
+                color: #374151;
+                line-height: 1.4;
+                font-weight: 500;
+            `;
+
+            // 添加选中状态的视觉反馈
+            if (checkbox.checked) {
+                item.style.backgroundColor = '#f0f4ff';
+                item.style.borderColor = '#667eea';
+            }
+
+            checkbox.addEventListener('change', () => {
+                this._toggle(opt.value);
+
+                // 更新项目样式
+                if (checkbox.checked) {
+                    item.style.backgroundColor = '#f0f4ff';
+                    item.style.borderColor = '#667eea';
+                } else {
+                    item.style.backgroundColor = 'white';
+                    item.style.borderColor = 'transparent';
+                }
+
+                // 更新标题中的统计信息
+                const subtitle = this._modal.querySelector('p');
+                if (subtitle) {
+                    subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
+                }
+            });
 
             item.appendChild(checkbox);
             item.appendChild(labelSpan);
 
+            // 添加进入动画
+            item.style.opacity = '0';
+            item.style.transform = 'translateY(10px)';
             this._listBox.appendChild(item);
+
+            setTimeout(() => {
+                item.style.transition = 'all 0.3s ease';
+                item.style.opacity = '1';
+                item.style.transform = 'translateY(0)';
+            }, index * 30);
         });
     }
 
-    /** 高亮关键词 */
     _highlight(text, key) {
         if (!key) return text;
-        return text.replace(new RegExp(`(${key})`, 'gi'), `<mark>$1</mark>`);
+        const regex = new RegExp(`(${this._escapeRegExp(key)})`, 'gi');
+        return text.replace(regex, '<mark style="background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-weight: 600;">$1</mark>');
+    }
+
+    _escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
 
-    /** 选择切换 */
     _toggle(value) {
         const index = this._selectedOptions.indexOf(value);
-        if (index >= 0) this._selectedOptions.splice(index, 1);
-        else this._selectedOptions.push(value);
+        if (index >= 0) {
+            this._selectedOptions.splice(index, 1);
+        } else {
+            this._selectedOptions.push(value);
+        }
     }
 
-    /** 点击确定 */
     _confirm() {
         this._onConfirm({
             selectedOptions: this._selectedOptions,
@@ -6764,17 +7169,28 @@ class CustomOptionsControl {
         this._closeModal();
     }
 
-    /** 销毁弹窗 */
     _closeModal() {
         if (this._overlay) {
-            document.body.removeChild(this._overlay);
-            this._overlay = null;
-            this._modal = null;
+            // 添加退出动画
+            this._modal.style.animation = 'modalSlideIn 0.2s ease-out reverse';
+            this._overlay.style.animation = 'modalBackdropFadeIn 0.2s ease-out reverse';
+
+            setTimeout(() => {
+                if (this._overlay && this._overlay.parentNode) {
+                    document.body.removeChild(this._overlay);
+                }
+                this._overlay = null;
+                this._modal = null;
+            }, 200);
+
+            document.removeEventListener('keydown', this._handleKeydown);
         }
     }
 
     onRemove() {
-        if (this._container) this._container.remove();
+        if (this._container) {
+            this._container.remove();
+        }
         this._closeModal();
     }
 }