raintee-maputils 1.0.43 → 1.0.45

package/dist/index.js

@@ -6738,6 +6738,582 @@ class RulerControl {
 	}
 }
 
+// /**
+//  * CustomSearchSelectControl - 紧凑型 Mapbox 控件
+//  * 优化UI布局，提高空间利用率
+//  */
+// class CustomSearchSelectControl {
+//     /**
+//      * 构造函数
+//      * @param {Object} options 配置选项
+//      * @param {Array} options.list 选项列表
+//      * @param {Function} options.onSelect 选中回调函数
+//      * @param {string} options.placeholder 搜索框占位符
+//      * @param {string} options.title 弹窗标题
+//      * @param {boolean} options.showSearch 是否显示搜索框
+//      * @param {boolean} options.compactMode 是否启用紧凑模式
+//      */
+//     constructor(options = {}) {
+//         this.options = {
+//             list: [],
+//             onSelect: () => { },
+//             onCancel: () => { },
+//             placeholder: '搜索...',
+//             title: '选择',
+//             showSearch: true,
+//             compactMode: true, // 新增：紧凑模式
+//             maxHeight: '60vh', // 新增：最大高度
+//             width: '60vw', // 新增：弹窗宽度
+//             ...options
+//         };
+
+//         this._map = null;
+//         this._container = null;
+//         this._modal = null;
+//         this._overlay = null;
+//         this._searchInput = null;
+//         this._optionsList = null;
+//         this._filteredList = [...this.options.list];
+//     }
+
+//     /**
+//      * 添加到地图
+//      * @param {Object} map Mapbox 地图实例
+//      * @returns {HTMLElement} 控件容器
+//      */
+//     onAdd(map) {
+//         this._map = map;
+
+//         // 创建控件按钮
+//         this._container = document.createElement('div');
+//         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group vector-layer-ctrl';
+//         this._container.style.cssText = `
+//             position: relative;
+//         `;
+//         this._container.innerHTML = `
+//             <button class="vector-layer-btn" title="${this.options.title}">
+//                 <svg viewBox="0 0 24 24" width="18" height="18">
+//                     <path d="M9,2V7.5L12,10.5L15,7.5V2H9ZM2,9H7.5L10.5,12L7.5,15H2V9ZM22,9H16.5L13.5,12L16.5,15H22V9ZM9,22V16.5L12,13.5L15,16.5V22H9Z" 
+//                           fill="currentColor"/>
+//                 </svg>
+//             </button>
+//         `;
+
+//         // 添加点击事件
+//         const button = this._container.querySelector('.vector-layer-btn');
+//         button.addEventListener('click', () => this.openModal());
+
+//         return this._container;
+//     }
+
+//     /**
+//      * 从地图移除
+//      */
+//     onRemove() {
+//         this.closeModal();
+//         if (this._container) {
+//             this._container.parentNode.removeChild(this._container);
+//         }
+//         this._map = undefined;
+//     }
+
+//     /**
+//      * 打开弹窗
+//      */
+//     openModal() {
+//         if (this._modal) return;
+
+//         // 创建遮罩层
+//         this._overlay = document.createElement('div');
+//         this._overlay.className = 'vector-layer-overlay';
+//         this._overlay.style.cssText = `
+//             position: fixed;
+//             top: 0;
+//             left: 0;
+//             width: 100%;
+//             height: 100%;
+//             background: rgba(0, 0, 0, 0.5);
+//             z-index: 9999;
+//             display: flex;
+//             justify-content: center;
+//             backdrop-filter: blur(2px);
+//         `;
+//         this._overlay.addEventListener('click', (e) => {
+//             if (e.target === this._overlay) this.closeModal();
+//         });
+
+//         // 创建弹窗
+//         this._modal = document.createElement('div');
+//         this._modal.className = 'vector-layer-modal';
+//         this._modal.style.cssText = `
+//             background: white;
+//             border-radius: 8px;
+//             padding: ${this.options.compactMode ? '16px' : '20px'};
+//             width: ${this.options.width};
+//             max-width: 90vw;
+//             max-height: ${this.options.maxHeight};
+//             display: flex;
+//             flex-direction: column;
+//             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+//             animation: vector-layer-modal-appear 0.2s ease-out;
+//             border: 1px solid #e0e0e0;
+//         `;
+
+//         // 弹窗标题
+//         const title = document.createElement('h3');
+//         title.className = 'vector-layer-title';
+//         title.textContent = this.options.title;
+//         title.style.cssText = `
+//             margin: 0 0 ${this.options.compactMode ? '12px' : '16px'} 0;
+//             font-size: ${this.options.compactMode ? '15px' : '16px'};
+//             font-weight: 600;
+//             color: #2c3e50;
+//             line-height: 1.3;
+//         `;
+//         this._modal.appendChild(title);
+
+//         // 搜索框
+//         if (this.options.showSearch) {
+//             const searchContainer = document.createElement('div');
+//             searchContainer.className = 'vector-layer-search';
+//             searchContainer.style.cssText = `
+//                 margin-bottom: ${this.options.compactMode ? '12px' : '16px'};
+//                 position: relative;
+//             `;
+
+//             this._searchInput = document.createElement('input');
+//             this._searchInput.type = 'text';
+//             this._searchInput.placeholder = this.options.placeholder;
+//             this._searchInput.className = 'vector-layer-search-input';
+//             this._searchInput.style.cssText = `
+//                 width: 100%;
+//                 padding: ${this.options.compactMode ? '8px 12px 8px 36px' : '10px 16px 10px 40px'};
+//                 border: 1px solid #dcdfe6;
+//                 border-radius: 6px;
+//                 font-size: 13px;
+//                 outline: none;
+//                 transition: all 0.2s;
+//                 box-sizing: border-box;
+//                 background-color: #f8f9fa;
+//             `;
+//             this._searchInput.addEventListener('input', () => this.filterOptions());
+//             this._searchInput.addEventListener('keydown', (e) => {
+//                 if (e.key === 'Escape') this.closeModal();
+//             });
+
+//             // 搜索图标
+//             const searchIcon = document.createElement('div');
+//             searchIcon.innerHTML = `
+//                 <svg viewBox="0 0 24 24" width="16" height="16" 
+//                      style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #888;">
+//                     <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" 
+//                           fill="currentColor"/>
+//                 </svg>
+//             `;
+
+//             searchContainer.appendChild(searchIcon);
+//             searchContainer.appendChild(this._searchInput);
+//             this._modal.appendChild(searchContainer);
+//         }
+
+//         // 选项列表容器
+//         const listContainer = document.createElement('div');
+//         listContainer.className = 'vector-layer-list-container';
+//         listContainer.style.cssText = `
+//             flex: 1;
+//             overflow: hidden;
+//             min-height: ${this.options.compactMode ? '120px' : '160px'};
+//             border-radius: 6px;
+//             border: 1px solid #e0e0e0;
+//         `;
+
+//         this._optionsList = document.createElement('div');
+//         this._optionsList.className = 'vector-layer-options';
+//         this._optionsList.style.cssText = `
+//             max-height: calc(${this.options.maxHeight} - ${this.options.compactMode ? '140px' : '180px'});
+//             overflow-y: auto;
+//             scroll-behavior: smooth;
+//         `;
+
+//         // 填充选项
+//         this.renderOptions();
+
+//         listContainer.appendChild(this._optionsList);
+//         this._modal.appendChild(listContainer);
+
+//         // 操作按钮
+//         const buttonContainer = document.createElement('div');
+//         buttonContainer.className = 'vector-layer-actions';
+//         buttonContainer.style.cssText = `
+//             display: flex;
+//             justify-content: flex-end;
+//             gap: 8px;
+//             margin-top: ${this.options.compactMode ? '12px' : '16px'};
+//             padding-top: ${this.options.compactMode ? '12px' : '16px'};
+//             border-top: 1px solid #f0f0f0;
+//         `;
+
+//         const cancelBtn = document.createElement('button');
+//         cancelBtn.textContent = '取消';
+//         cancelBtn.className = 'vector-layer-cancel';
+//         cancelBtn.style.cssText = `
+//             padding: 6px 16px;
+//             border: 1px solid #dcdfe6;
+//             border-radius: 4px;
+//             background: white;
+//             color: #606266;
+//             cursor: pointer;
+//             font-size: 13px;
+//             transition: all 0.2s;
+//             font-weight: 500;
+//         `;
+//         cancelBtn.addEventListener('click', () => {
+//             this.closeModal();
+//             this.options.onCancel(this._map, null)
+//         });
+//         cancelBtn.addEventListener('mouseenter', () => {
+//             cancelBtn.style.backgroundColor = '#f5f7fa';
+//             cancelBtn.style.borderColor = '#c0c4cc';
+//         });
+//         cancelBtn.addEventListener('mouseleave', () => {
+//             cancelBtn.style.backgroundColor = 'white';
+//             cancelBtn.style.borderColor = '#dcdfe6';
+//         });
+
+//         buttonContainer.appendChild(cancelBtn);
+//         this._modal.appendChild(buttonContainer);
+
+//         this._overlay.appendChild(this._modal);
+//         document.body.appendChild(this._overlay);
+
+//         // 阻止地图事件冒泡
+//         this._modal.addEventListener('click', (e) => e.stopPropagation());
+//         this._modal.addEventListener('mousedown', (e) => e.stopPropagation());
+//         this._modal.addEventListener('mouseup', (e) => e.stopPropagation());
+
+//         // 聚焦搜索框
+//         if (this._searchInput) {
+//             setTimeout(() => this._searchInput.focus(), 50);
+//         }
+
+//         // 添加动画样式
+//         this.addStyles();
+//     }
+
+//     /**
+//      * 渲染选项列表
+//      */
+//     renderOptions() {
+//         this._optionsList.innerHTML = '';
+
+//         if (this._filteredList.length === 0) {
+//             const emptyItem = document.createElement('div');
+//             emptyItem.className = 'vector-layer-option empty';
+//             emptyItem.textContent = '无匹配结果';
+//             emptyItem.style.cssText = `
+//                 padding: ${this.options.compactMode ? '20px 16px' : '24px 16px'};
+//                 text-align: center;
+//                 color: #999;
+//                 font-size: 13px;
+//                 font-style: italic;
+//             `;
+//             this._optionsList.appendChild(emptyItem);
+//             return;
+//         }
+
+//         this._filteredList.forEach((item, index) => {
+//             const option = document.createElement('div');
+//             option.className = 'vector-layer-option';
+//             option.dataset.value = item.value || item.label;
+//             option.dataset.index = index;
+//             option.style.cssText = `
+//                 padding: ${this.options.compactMode ? '8px 12px' : '10px 16px'};
+//                 cursor: pointer;
+//                 border-bottom: 1px solid #f5f5f5;
+//                 font-size: 13px;
+//                 transition: all 0.15s;
+//                 display: flex;
+//                 align-items: center;
+//                 gap: 8px;
+//                 min-height: ${this.options.compactMode ? '36px' : '40px'};
+//                 box-sizing: border-box;
+//             `;
+
+//             option.innerHTML = `
+//                 ${item.icon ? `<span class="option-icon" style="flex-shrink: 0; width: 16px; height: 16px;">${item.icon}</span>` : ''}
+//                 <span class="option-label" style="flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${item.label}</span>
+//                 ${item.description ? `<span class="option-desc" style="font-size: 12px; color: #888; flex-shrink: 0;">${item.description}</span>` : ''}
+//             `;
+
+//             option.addEventListener('click', () => this.selectOption(item));
+//             option.addEventListener('mouseenter', () => {
+//                 option.style.backgroundColor = '#f0f7ff';
+//                 option.style.borderLeftColor = '#1890ff';
+//             });
+//             option.addEventListener('mouseleave', () => {
+//                 option.style.backgroundColor = '';
+//                 option.style.borderLeftColor = '';
+//             });
+
+//             this._optionsList.appendChild(option);
+//         });
+
+//         // 移除最后一个选项的下边框
+//         const lastOption = this._optionsList.lastChild;
+//         if (lastOption && !lastOption.classList.contains('empty')) {
+//             lastOption.style.borderBottom = 'none';
+//         }
+//     }
+
+//     /**
+//      * 筛选选项
+//      */
+//     filterOptions() {
+//         const searchText = this._searchInput ? this._searchInput.value.toLowerCase() : '';
+
+//         if (!searchText) {
+//             this._filteredList = [...this.options.list];
+//         } else {
+//             this._filteredList = this.options.list.filter(item =>
+//                 item.label.toLowerCase().includes(searchText) ||
+//                 (item.value && item.value.toLowerCase().includes(searchText)) ||
+//                 (item.description && item.description.toLowerCase().includes(searchText))
+//             );
+//         }
+
+//         this.renderOptions();
+//     }
+
+//     /**
+//      * 选中选项
+//      * @param {Object} item 选中的选项
+//      */
+//     selectOption(item) {
+//         try {
+//             // 执行回调
+//             this.options.onSelect(this._map, item);
+
+//             // 添加选中动画
+//             const option = this._optionsList.querySelector(`[data-value="${item.value || item.label}"]`);
+//             if (option) {
+//                 const originalBg = option.style.backgroundColor;
+//                 const originalColor = option.style.color;
+//                 option.style.backgroundColor = '#1890ff';
+//                 option.style.color = 'white';
+//                 setTimeout(() => {
+//                     option.style.backgroundColor = originalBg;
+//                     option.style.color = originalColor;
+//                 }, 150);
+//                 setTimeout(() => {
+//                     this.closeModal();
+//                 }, 300);
+//             } else {
+//                 this.closeModal();
+//             }
+//         } catch (error) {
+//             console.error('选中回调执行失败:', error);
+//             this.closeModal();
+//         }
+//     }
+
+//     /**
+//      * 关闭弹窗
+//      */
+//     closeModal() {
+//         if (this._overlay) {
+//             this._overlay.style.opacity = '0';
+//             this._overlay.style.transition = 'opacity 0.15s ease-out';
+
+//             setTimeout(() => {
+//                 if (this._overlay && this._overlay.parentNode) {
+//                     document.body.removeChild(this._overlay);
+//                 }
+//                 this._overlay = null;
+//                 this._modal = null;
+//                 this._searchInput = null;
+//                 this._optionsList = null;
+//             }, 150);
+//         }
+//     }
+
+//     /**
+//      * 更新选项列表
+//      * @param {Array} newList 新的选项列表
+//      */
+//     updateList(newList) {
+//         this.options.list = newList;
+//         this._filteredList = [...newList];
+//         if (this._modal) {
+//             this.renderOptions();
+//         }
+//     }
+
+//     /**
+//      * 添加CSS样式
+//      */
+//     addStyles() {
+//         if (document.querySelector('#vector-layer-styles')) return;
+
+//         const style = document.createElement('style');
+//         style.id = 'vector-layer-styles';
+//         style.textContent = `
+//             @keyframes vector-layer-modal-appear {
+//                 from {
+//                     opacity: 0;
+//                     transform: translateY(-8px) scale(0.98);
+//                 }
+//                 to {
+//                     opacity: 1;
+//                     transform: translateY(0) scale(1);
+//                 }
+//             }
+
+//             .vector-layer-ctrl button {
+//                 background: white;
+//                 border: 1px solid #d9d9d9;
+//                 border-radius: 4px;
+//                 width: 28px;
+//                 height: 28px;
+//                 display: flex;
+//                 align-items: center;
+//                 justify-content: center;
+//                 cursor: pointer;
+//                 color: #555;
+//                 transition: all 0.2s;
+//                 padding: 0;
+//                 margin: 0;
+//             }
+
+//             .vector-layer-ctrl button:hover {
+//                 background: #f5f5f5;
+//                 border-color: #40a9ff;
+//                 color: #40a9ff;
+//                 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+//             }
+
+//             .vector-layer-search-input:focus {
+//                 border-color: #40a9ff;
+//                 box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+//                 background-color: white;
+//             }
+
+//             .vector-layer-option {
+//                 position: relative;
+//                 border-left: 3px solid transparent;
+//             }
+
+//             .vector-layer-option:hover {
+//                 border-left-color: #1890ff;
+//             }
+
+//             .vector-layer-option:active {
+//                 background-color: #e6f7ff !important;
+//             }
+
+//             .vector-layer-options::-webkit-scrollbar {
+//                 width: 4px;
+//             }
+
+//             .vector-layer-options::-webkit-scrollbar-track {
+//                 background: #f5f5f5;
+//                 border-radius: 2px;
+//             }
+
+//             .vector-layer-options::-webkit-scrollbar-thumb {
+//                 background: #bfbfbf;
+//                 border-radius: 2px;
+//             }
+
+//             .vector-layer-options::-webkit-scrollbar-thumb:hover {
+//                 background: #8c8c8c;
+//             }
+
+//             .vector-layer-modal {
+//                 overflow: hidden;
+//             }
+
+//             /* 紧凑模式下的额外样式 */
+//             .vector-layer-modal.compact {
+//                 padding: 12px;
+//             }
+
+//             .vector-layer-modal.compact .vector-layer-title {
+//                 font-size: 14px;
+//                 margin-bottom: 10px;
+//             }
+
+//             .vector-layer-modal.compact .vector-layer-search-input {
+//                 padding: 6px 10px 6px 32px;
+//                 font-size: 12px;
+//             }
+
+//             .vector-layer-modal.compact .vector-layer-option {
+//                 padding: 6px 10px;
+//                 font-size: 12px;
+//                 min-height: 32px;
+//             }
+
+//             /* 暗色模式支持 */
+//             @media (prefers-color-scheme: dark) {
+//                 .vector-layer-modal {
+//                     background: #2d2d2d;
+//                     border-color: #404040;
+//                     color: #e0e0e0;
+//                 }
+
+//                 .vector-layer-title {
+//                     color: #e0e0e0;
+//                 }
+
+//                 .vector-layer-search-input {
+//                     background-color: #3a3a3a;
+//                     border-color: #555;
+//                     color: #e0e0e0;
+//                 }
+
+//                 .vector-layer-search-input:focus {
+//                     border-color: #1890ff;
+//                 }
+
+//                 .vector-layer-list-container {
+//                     border-color: #404040;
+//                 }
+
+//                 .vector-layer-option {
+//                     border-bottom-color: #404040;
+//                 }
+
+//                 .vector-layer-option:hover {
+//                     background-color: #3a3a3a;
+//                 }
+
+//                 .option-desc {
+//                     color: #aaa;
+//                 }
+
+//                 .vector-layer-actions {
+//                     border-top-color: #404040;
+//                 }
+
+//                 .vector-layer-cancel {
+//                     background: #3a3a3a;
+//                     border-color: #555;
+//                     color: #e0e0e0;
+//                 }
+
+//                 .vector-layer-options::-webkit-scrollbar-track {
+//                     background: #3a3a3a;
+//                 }
+
+//                 .vector-layer-options::-webkit-scrollbar-thumb {
+//                     background: #666;
+//                 }
+//             }
+//         `;
+
+//         document.head.appendChild(style);
+//     }
+// }
 /**
  * CustomSearchSelectControl - 紧凑型 Mapbox 控件
  * 优化UI布局，提高空间利用率
@@ -6757,12 +7333,16 @@ class CustomSearchSelectControl {
         this.options = {
             list: [],
             onSelect: () => { },
+            onCancel: () => { },
             placeholder: '搜索...',
             title: '选择',
             showSearch: true,
             compactMode: true, // 新增：紧凑模式
-            maxHeight: '60vh', // 新增：最大高度
+            maxHeight: '100vh', // 新增：最大高度
             width: '60vw', // 新增：弹窗宽度
+            mobileBreakpoint: 768, // 新增：移动端断点
+            mobileMaxHeight: '50vh', // 新增：移动端最大高度
+            mobileCompactMode: true, // 新增：移动端自动启用紧凑模式
             ...options
         };
 
@@ -6773,6 +7353,57 @@ class CustomSearchSelectControl {
         this._searchInput = null;
         this._optionsList = null;
         this._filteredList = [...this.options.list];
+        this._isMobile = false;
+        this._isLandscape = false;
+    }
+
+    /**
+     * 检测设备和屏幕方向
+     */
+    detectDeviceAndOrientation() {
+        this._isMobile = window.innerWidth <= this.options.mobileBreakpoint;
+        this._isLandscape = window.innerWidth > window.innerHeight;
+
+        // 横屏时特别处理
+        if (this._isMobile && this._isLandscape) {
+            this._isMobile = true;
+        }
+    }
+
+    /**
+     * 获取弹窗高度设置
+     */
+    getModalHeightSettings() {
+        this.detectDeviceAndOrientation();
+
+        if (this._isMobile) {
+            // 移动端处理
+            if (this._isLandscape) {
+                // 横屏状态
+                return {
+                    maxHeight: '100vh', // 横屏时稍微大一些
+                    modalHeight: 'calc(100vh - 20px)', // 横屏时几乎全屏
+                    listMaxHeight: 'calc(70vh - 100px)', // 为按钮留出空间
+                    compact: this.options.mobileCompactMode
+                };
+            } else {
+                // 竖屏状态
+                return {
+                    maxHeight: this.options.mobileMaxHeight,
+                    modalHeight: 'auto',
+                    listMaxHeight: `calc(${this.options.mobileMaxHeight} - 100px)`,
+                    compact: this.options.mobileCompactMode
+                };
+            }
+        } else {
+            // 桌面端
+            return {
+                maxHeight: this.options.maxHeight,
+                modalHeight: 'auto',
+                listMaxHeight: `calc(${this.options.maxHeight} - ${this.options.compactMode ? '140px' : '180px'})`,
+                compact: this.options.compactMode
+            };
+        }
     }
 
     /**
@@ -6785,7 +7416,7 @@ class CustomSearchSelectControl {
 
         // 创建控件按钮
         this._container = document.createElement('div');
-        this._container.className = 'mapboxgl-ctrl vector-layer-ctrl';
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group vector-layer-ctrl';
         this._container.style.cssText = `
             position: relative;
         `;
@@ -6822,6 +7453,9 @@ class CustomSearchSelectControl {
     openModal() {
         if (this._modal) return;
 
+        // 获取高度设置
+        const heightSettings = this.getModalHeightSettings();
+
         // 创建遮罩层
         this._overlay = document.createElement('div');
         this._overlay.className = 'vector-layer-overlay';
@@ -6835,6 +7469,9 @@ class CustomSearchSelectControl {
             z-index: 9999;
             display: flex;
             justify-content: center;
+            align-items: center;
+            padding: 10px;
+            box-sizing: border-box;
             backdrop-filter: blur(2px);
         `;
         this._overlay.addEventListener('click', (e) => {
@@ -6844,30 +7481,75 @@ class CustomSearchSelectControl {
         // 创建弹窗
         this._modal = document.createElement('div');
         this._modal.className = 'vector-layer-modal';
-        this._modal.style.cssText = `
-            background: white;
-            border-radius: 8px;
-            padding: ${this.options.compactMode ? '16px' : '20px'};
-            width: ${this.options.width};
-            max-width: 90vw;
-            max-height: ${this.options.maxHeight};
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-            animation: vector-layer-modal-appear 0.2s ease-out;
-            border: 1px solid #e0e0e0;
-        `;
+
+        // 根据设备设置不同样式
+        if (this._isMobile) {
+            if (this._isLandscape) {
+                // 横屏状态
+                this._modal.style.cssText = `
+                    background: white;
+                    border-radius: 8px;
+                    padding: ${heightSettings.compact ? '12px' : '16px'};
+                    width: ${this._isLandscape ? '80vw' : '90vw'};
+                    max-width: ${this._isLandscape ? '600px' : '90vw'};
+                    max-height: ${heightSettings.maxHeight};
+                    height: ${heightSettings.modalHeight};
+                    display: flex;
+                    flex-direction: column;
+                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+                    animation: vector-layer-modal-appear 0.2s ease-out;
+                    border: 1px solid #e0e0e0;
+                    box-sizing: border-box;
+                    overflow: hidden;
+                `;
+            } else {
+                // 竖屏状态
+                this._modal.style.cssText = `
+                    background: white;
+                    border-radius: 8px;
+                    padding: ${heightSettings.compact ? '12px' : '16px'};
+                    width: 90vw;
+                    max-width: 500px;
+                    max-height: ${heightSettings.maxHeight};
+                    display: flex;
+                    flex-direction: column;
+                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+                    animation: vector-layer-modal-appear 0.2s ease-out;
+                    border: 1px solid #e0e0e0;
+                    box-sizing: border-box;
+                    overflow: hidden;
+                `;
+            }
+        } else {
+            // 桌面端
+            this._modal.style.cssText = `
+                background: white;
+                border-radius: 8px;
+                padding: ${heightSettings.compact ? '16px' : '20px'};
+                width: ${this.options.width};
+                max-width: 90vw;
+                max-height: ${heightSettings.maxHeight};
+                display: flex;
+                flex-direction: column;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+                animation: vector-layer-modal-appear 0.2s ease-out;
+                border: 1px solid #e0e0e0;
+                box-sizing: border-box;
+                overflow: hidden;
+            `;
+        }
 
         // 弹窗标题
         const title = document.createElement('h3');
         title.className = 'vector-layer-title';
         title.textContent = this.options.title;
         title.style.cssText = `
-            margin: 0 0 ${this.options.compactMode ? '12px' : '16px'} 0;
-            font-size: ${this.options.compactMode ? '15px' : '16px'};
+            margin: 0 0 ${heightSettings.compact ? '12px' : '16px'} 0;
+            font-size: ${heightSettings.compact ? '15px' : '16px'};
             font-weight: 600;
             color: #2c3e50;
             line-height: 1.3;
+            flex-shrink: 0;
         `;
         this._modal.appendChild(title);
 
@@ -6876,8 +7558,9 @@ class CustomSearchSelectControl {
             const searchContainer = document.createElement('div');
             searchContainer.className = 'vector-layer-search';
             searchContainer.style.cssText = `
-                margin-bottom: ${this.options.compactMode ? '12px' : '16px'};
+                margin-bottom: ${heightSettings.compact ? '12px' : '16px'};
                 position: relative;
+                flex-shrink: 0;
             `;
 
             this._searchInput = document.createElement('input');
@@ -6886,10 +7569,10 @@ class CustomSearchSelectControl {
             this._searchInput.className = 'vector-layer-search-input';
             this._searchInput.style.cssText = `
                 width: 100%;
-                padding: ${this.options.compactMode ? '8px 12px 8px 36px' : '10px 16px 10px 40px'};
+                padding: ${heightSettings.compact ? '8px 12px 8px 36px' : '10px 16px 10px 40px'};
                 border: 1px solid #dcdfe6;
                 border-radius: 6px;
-                font-size: 13px;
+                font-size: ${heightSettings.compact ? '13px' : '14px'};
                 outline: none;
                 transition: all 0.2s;
                 box-sizing: border-box;
@@ -6921,17 +7604,21 @@ class CustomSearchSelectControl {
         listContainer.style.cssText = `
             flex: 1;
             overflow: hidden;
-            min-height: ${this.options.compactMode ? '120px' : '160px'};
+            min-height: ${heightSettings.compact ? '100px' : '120px'};
             border-radius: 6px;
             border: 1px solid #e0e0e0;
+            display: flex;
+            flex-direction: column;
         `;
 
         this._optionsList = document.createElement('div');
         this._optionsList.className = 'vector-layer-options';
         this._optionsList.style.cssText = `
-            max-height: calc(${this.options.maxHeight} - ${this.options.compactMode ? '140px' : '180px'});
+            flex: 1;
             overflow-y: auto;
             scroll-behavior: smooth;
+            max-height: ${heightSettings.listMaxHeight};
+            min-height: ${heightSettings.compact ? '80px' : '100px'};
         `;
 
         // 填充选项
@@ -6947,26 +7634,32 @@ class CustomSearchSelectControl {
             display: flex;
             justify-content: flex-end;
             gap: 8px;
-            margin-top: ${this.options.compactMode ? '12px' : '16px'};
-            padding-top: ${this.options.compactMode ? '12px' : '16px'};
+            margin-top: ${heightSettings.compact ? '12px' : '16px'};
+            padding-top: ${heightSettings.compact ? '12px' : '16px'};
             border-top: 1px solid #f0f0f0;
+            flex-shrink: 0;
         `;
 
         const cancelBtn = document.createElement('button');
         cancelBtn.textContent = '取消';
         cancelBtn.className = 'vector-layer-cancel';
         cancelBtn.style.cssText = `
-            padding: 6px 16px;
+            padding: ${this._isMobile ? '6px 12px' : '6px 16px'};
             border: 1px solid #dcdfe6;
             border-radius: 4px;
             background: white;
             color: #606266;
             cursor: pointer;
-            font-size: 13px;
+            font-size: ${this._isMobile ? '12px' : '13px'};
             transition: all 0.2s;
             font-weight: 500;
+            min-width: 60px;
+            box-sizing: border-box;
         `;
-        cancelBtn.addEventListener('click', () => this.closeModal());
+        cancelBtn.addEventListener('click', () => {
+            this.closeModal();
+            this.options.onCancel(this._map, null);
+        });
         cancelBtn.addEventListener('mouseenter', () => {
             cancelBtn.style.backgroundColor = '#f5f7fa';
             cancelBtn.style.borderColor = '#c0c4cc';
@@ -6975,6 +7668,12 @@ class CustomSearchSelectControl {
             cancelBtn.style.backgroundColor = 'white';
             cancelBtn.style.borderColor = '#dcdfe6';
         });
+        cancelBtn.addEventListener('touchstart', () => {
+            cancelBtn.style.backgroundColor = '#f5f7fa';
+        });
+        cancelBtn.addEventListener('touchend', () => {
+            cancelBtn.style.backgroundColor = 'white';
+        });
 
         buttonContainer.appendChild(cancelBtn);
         this._modal.appendChild(buttonContainer);
@@ -6986,6 +7685,30 @@ class CustomSearchSelectControl {
         this._modal.addEventListener('click', (e) => e.stopPropagation());
         this._modal.addEventListener('mousedown', (e) => e.stopPropagation());
         this._modal.addEventListener('mouseup', (e) => e.stopPropagation());
+        this._modal.addEventListener('touchstart', (e) => e.stopPropagation());
+        this._modal.addEventListener('touchend', (e) => e.stopPropagation());
+
+        // 处理窗口大小变化
+        this._handleResize = () => {
+            const newHeightSettings = this.getModalHeightSettings();
+            if (this._modal) {
+                if (this._isMobile && this._isLandscape) {
+                    this._modal.style.maxHeight = newHeightSettings.maxHeight;
+                    this._modal.style.height = newHeightSettings.modalHeight;
+                    this._optionsList.style.maxHeight = newHeightSettings.listMaxHeight;
+                } else if (this._isMobile) {
+                    this._modal.style.maxHeight = newHeightSettings.maxHeight;
+                    this._modal.style.height = 'auto';
+                    this._optionsList.style.maxHeight = newHeightSettings.listMaxHeight;
+                }
+            }
+        };
+
+        window.addEventListener('resize', this._handleResize);
+        window.addEventListener('orientationchange', this._handleResize);
+
+        // 添加触摸事件支持
+        this.addTouchSupport();
 
         // 聚焦搜索框
         if (this._searchInput) {
@@ -6996,6 +7719,18 @@ class CustomSearchSelectControl {
         this.addStyles();
     }
 
+    /**
+     * 添加触摸支持
+     */
+    addTouchSupport() {
+        if (this._modal) {
+            // 防止弹窗内滚动传播到body
+            this._modal.addEventListener('touchmove', (e) => {
+                e.stopPropagation();
+            }, { passive: false });
+        }
+    }
+
     /**
      * 渲染选项列表
      */
@@ -7012,6 +7747,10 @@ class CustomSearchSelectControl {
                 color: #999;
                 font-size: 13px;
                 font-style: italic;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100px;
             `;
             this._optionsList.appendChild(emptyItem);
             return;
@@ -7023,29 +7762,44 @@ class CustomSearchSelectControl {
             option.dataset.value = item.value || item.label;
             option.dataset.index = index;
             option.style.cssText = `
-                padding: ${this.options.compactMode ? '8px 12px' : '10px 16px'};
+                padding: ${this._isMobile ? '8px 10px' : '8px 12px'};
                 cursor: pointer;
                 border-bottom: 1px solid #f5f5f5;
-                font-size: 13px;
+                font-size: ${this._isMobile ? '12px' : '13px'};
                 transition: all 0.15s;
                 display: flex;
                 align-items: center;
                 gap: 8px;
-                min-height: ${this.options.compactMode ? '36px' : '40px'};
+                min-height: ${this._isMobile ? '40px' : '36px'};
                 box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
             `;
 
             option.innerHTML = `
                 ${item.icon ? `<span class="option-icon" style="flex-shrink: 0; width: 16px; height: 16px;">${item.icon}</span>` : ''}
                 <span class="option-label" style="flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${item.label}</span>
-                ${item.description ? `<span class="option-desc" style="font-size: 12px; color: #888; flex-shrink: 0;">${item.description}</span>` : ''}
+                ${item.description ? `<span class="option-desc" style="font-size: 11px; color: #888; flex-shrink: 0; display: ${this._isMobile && this._isLandscape ? 'none' : 'block'}">${item.description}</span>` : ''}
             `;
 
+            // 点击事件
             option.addEventListener('click', () => this.selectOption(item));
+
+            // 触摸事件
+            option.addEventListener('touchstart', () => {
+                option.style.backgroundColor = '#f0f7ff';
+                option.style.borderLeftColor = '#1890ff';
+            });
+
+            option.addEventListener('touchend', () => {
+                option.style.backgroundColor = '';
+                option.style.borderLeftColor = '';
+            });
+
             option.addEventListener('mouseenter', () => {
                 option.style.backgroundColor = '#f0f7ff';
                 option.style.borderLeftColor = '#1890ff';
             });
+
             option.addEventListener('mouseleave', () => {
                 option.style.backgroundColor = '';
                 option.style.borderLeftColor = '';
@@ -7116,6 +7870,12 @@ class CustomSearchSelectControl {
      * 关闭弹窗
      */
     closeModal() {
+        // 移除事件监听
+        if (this._handleResize) {
+            window.removeEventListener('resize', this._handleResize);
+            window.removeEventListener('orientationchange', this._handleResize);
+        }
+
         if (this._overlay) {
             this._overlay.style.opacity = '0';
             this._overlay.style.transition = 'opacity 0.15s ease-out';
@@ -7128,6 +7888,7 @@ class CustomSearchSelectControl {
                 this._modal = null;
                 this._searchInput = null;
                 this._optionsList = null;
+                this._handleResize = null;
             }, 150);
         }
     }
@@ -7228,25 +7989,65 @@ class CustomSearchSelectControl {
                 overflow: hidden;
             }
             
-            /* 紧凑模式下的额外样式 */
-            .vector-layer-modal.compact {
-                padding: 12px;
-            }
-            
-            .vector-layer-modal.compact .vector-layer-title {
-                font-size: 14px;
-                margin-bottom: 10px;
+            /* 移动端优化 */
+            @media (max-width: 768px) {
+                .vector-layer-modal {
+                    width: 90vw !important;
+                    max-width: 500px !important;
+                }
+                
+                .vector-layer-option {
+                    padding: 10px 12px;
+                    min-height: 44px;
+                }
+                
+                .vector-layer-actions {
+                    padding: 12px 0 0 0;
+                }
+                
+                .vector-layer-cancel {
+                    padding: 8px 16px;
+                    font-size: 14px;
+                }
             }
             
-            .vector-layer-modal.compact .vector-layer-search-input {
-                padding: 6px 10px 6px 32px;
-                font-size: 12px;
+            /* 横屏优化 */
+            @media (max-width: 768px) and (orientation: landscape) {
+                .vector-layer-modal {
+                    width: 80vw !important;
+                    max-height: 70vh !important;
+                    height: calc(100vh - 20px) !important;
+                }
+                
+                .vector-layer-list-container {
+                    min-height: 40vh !important;
+                }
+                
+                .vector-layer-options {
+                    max-height: calc(70vh - 120px) !important;
+                }
+                
+                .option-desc {
+                    display: none !important;
+                }
             }
             
-            .vector-layer-modal.compact .vector-layer-option {
-                padding: 6px 10px;
-                font-size: 12px;
-                min-height: 32px;
+            /* 小屏幕手机 */
+            @media (max-width: 480px) {
+                .vector-layer-modal {
+                    width: 95vw !important;
+                    padding: 12px !important;
+                }
+                
+                .vector-layer-title {
+                    font-size: 14px !important;
+                    margin-bottom: 10px !important;
+                }
+                
+                .vector-layer-search-input {
+                    padding: 6px 10px 6px 32px !important;
+                    font-size: 12px !important;
+                }
             }
             
             /* 暗色模式支持 */
@@ -7305,12 +8106,661 @@ class CustomSearchSelectControl {
                     background: #666;
                 }
             }
+            
+            /* 防止iOS上的回弹效果 */
+            .vector-layer-overlay {
+                overscroll-behavior: contain;
+            }
+            
+            /* 触摸优化 */
+            .vector-layer-option {
+                -webkit-tap-highlight-color: transparent;
+            }
+            
+            .vector-layer-cancel {
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+            }
         `;
 
         document.head.appendChild(style);
     }
 }
 
+// class CustomOptionsControl {
+//     constructor(args) {
+//         const { title, options, onConfirm, icon } = args;
+
+//         this._map = null;
+//         this._container = null;
+
+//         this._title = title || '';
+//         this._options = options || [];
+//         this._icon = icon || null;
+//         this._onConfirm = onConfirm || (() => { });
+//         this._originalOptions = [...this._options];
+//         this._selectedOptions = [];
+//     }
+
+//     onAdd(map) {
+//         this._map = map;
+
+//         this._container = document.createElement('div');
+//         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-options-control';
+
+//         const mainButton = document.createElement('button');
+//         mainButton.style.cssText = `
+//             padding: 0;
+//             background: white;
+//             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);
+//             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: 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;
+//             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: 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);
+//         });
+
+//         searchContainer.appendChild(searchIcon);
+//         searchContainer.appendChild(searchInput);
+//         section.appendChild(searchContainer);
+
+//         return section;
+//     }
+
+//     _createFooter() {
+//         const footer = document.createElement('div');
+//         footer.style.cssText = `
+//             padding: 1rem 1.25rem;
+//             background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+//             border-top: 1px solid #e2e8f0;
+//             display: flex;
+//             justify-content: flex-end;
+//             gap: 0.75rem;
+//         `;
+
+//         const cancelBtn = document.createElement('button');
+//         cancelBtn.textContent = '取消';
+//         cancelBtn.style.cssText = `
+//             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: 0.5rem 1rem;
+//             background: #007cba;
+//             color: white;
+//             border: none;
+//             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);
+//         return footer;
+//     }
+
+//     _renderList(keyword) {
+//         this._listBox.innerHTML = '';
+
+//         const list = keyword
+//             ? this._originalOptions.filter(
+//                 (o) =>
+//                     o.label.toLowerCase().includes(keyword.toLowerCase()) ||
+//                     String(o.value).toLowerCase().includes(keyword.toLowerCase())
+//             )
+//             : this._originalOptions;
+
+//         if (list.length === 0) {
+//             const empty = document.createElement('div');
+//             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;
+//         }
+
+//         // 添加选项统计
+//         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: 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 = '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;
+//         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);
+//         }
+//     }
+
+//     _confirm() {
+//         this._onConfirm({
+//             selectedOptions: this._selectedOptions,
+//             unselectedOptions: this._originalOptions.filter(
+//                 (o) => !this._selectedOptions.includes(o.value)
+//             ),
+//             allOptions: this._originalOptions
+//         });
+//         this._closeModal();
+//     }
+
+//     _closeModal() {
+//         if (this._overlay) {
+//             // 添加退出动画
+//             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();
+//         }
+//         this._closeModal();
+//     }
+// }
 class CustomOptionsControl {
     constructor(args) {
         const { title, options, onConfirm, icon } = args;
@@ -7334,21 +8784,22 @@ class CustomOptionsControl {
 
         const mainButton = document.createElement('button');
         mainButton.style.cssText = `
-            padding: 0;
+            padding: 4px;
             background: white;
-            border: 0.0625rem solid #ccc;
+            border: 1px solid #ccc;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 0.375rem;
+            width: 28px;
+            height: 28px;
         `;
 
         if (this._icon) {
             const iconWrapper = document.createElement('span');
             iconWrapper.style.cssText = `
-                width: 1rem;
-                height: 1rem;
+                width: 16px;
+                height: 16px;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
@@ -7359,7 +8810,7 @@ class CustomOptionsControl {
             } else {
                 const img = document.createElement('img');
                 img.src = this._icon;
-                img.style.cssText = `width: 1rem; height: 1rem; object-fit: contain;`;
+                img.style.cssText = `width: 16px; height: 16px; object-fit: contain;`;
                 iconWrapper.appendChild(img);
             }
 
@@ -7400,17 +8851,6 @@ class CustomOptionsControl {
                 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;
             }
@@ -7421,20 +8861,21 @@ class CustomOptionsControl {
             
             .custom-search-input:focus {
                 border-color: #667eea !important;
-                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+                box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
             }
             
             .custom-checkbox {
                 position: relative;
                 appearance: none;
-                width: 1rem;
-                height: 1rem;
+                width: 16px;
+                height: 16px;
                 border: 2px solid #d1d5db;
-                border-radius: 0.25rem;
+                border-radius: 3px;
                 background: white;
                 cursor: pointer;
                 transition: all 0.2s ease;
-                margin-right: 0.75rem;
+                margin-right: 8px;
+                flex-shrink: 0;
             }
             
             .custom-checkbox:checked {
@@ -7449,13 +8890,12 @@ class CustomOptionsControl {
                 left: 50%;
                 transform: translate(-50%, -50%);
                 color: white;
-                font-size: 0.75rem;
+                font-size: 12px;
                 font-weight: bold;
             }
             
             .custom-checkbox:hover {
                 border-color: #667eea;
-                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
             }
             
             .custom-list-item {
@@ -7465,11 +8905,10 @@ class CustomOptionsControl {
             .custom-list-item:hover {
                 background-color: #f8fafc !important;
                 border-color: #e2e8f0 !important;
-                transform: translateX(4px) !important;
             }
             
             .custom-modal::-webkit-scrollbar {
-                width: 6px;
+                width: 5px;
             }
             
             .custom-modal::-webkit-scrollbar-track {
@@ -7482,8 +8921,73 @@ class CustomOptionsControl {
                 border-radius: 3px;
             }
             
-            .custom-modal::-webkit-scrollbar-thumb:hover {
-                background: linear-gradient(135deg, #5a67d8, #6b46c1);
+            /* 移动端优化样式 */
+            @media (max-height: 500px) and (orientation: landscape) {
+                .custom-modal {
+                    max-height: 90vh !important;
+                    max-width: 90vw !important;
+                    width: 90vw !important;
+                    margin: 5vh auto !important;
+                }
+                
+                .custom-modal .modal-header {
+                    padding: 8px 12px !important;
+                }
+                
+                .custom-modal .modal-title {
+                    font-size: 13px !important;
+                    margin-bottom: 2px !important;
+                }
+                
+                .custom-modal .modal-subtitle {
+                    font-size: 11px !important;
+                }
+                
+                .custom-modal .modal-content {
+                    max-height: 60vh !important;
+                    min-height: 40vh !important;
+                }
+                
+                .custom-modal .list-item {
+                    padding: 6px 8px !important;
+                    font-size: 12px !important;
+                }
+                
+                .custom-modal .modal-footer {
+                    padding: 8px 12px !important;
+                    position: sticky;
+                    bottom: 0;
+                    background: #f8fafc;
+                    z-index: 10;
+                }
+                
+                .custom-modal .modal-footer button {
+                    padding: 5px 10px !important;
+                    font-size: 12px !important;
+                }
+                
+                .custom-modal .search-container {
+                    padding: 8px 12px 4px 12px !important;
+                }
+                
+                .custom-modal .search-input {
+                    padding: 6px 8px 6px 24px !important;
+                    font-size: 12px !important;
+                }
+                
+                .custom-modal .stats-text {
+                    font-size: 11px !important;
+                    padding: 2px 0 !important;
+                }
+            }
+            
+            /* 小屏幕通用优化 */
+            @media (max-width: 480px) {
+                .custom-modal {
+                    width: 95vw !important;
+                    max-width: 95vw !important;
+                    margin: 2.5vh auto !important;
+                }
             }
         `;
         document.head.appendChild(styles);
@@ -7496,31 +9000,31 @@ class CustomOptionsControl {
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
             background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(4px);
-            -webkit-backdrop-filter: blur(4px);
+            backdrop-filter: blur(2px);
+            -webkit-backdrop-filter: blur(2px);
             z-index: 10000;
             display: flex;
             justify-content: center;
             align-items: center;
-            padding: 1rem;
+            padding: 12px;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            overflow-y: auto;
         `;
 
         this._modal = document.createElement('div');
         this._modal.className = 'custom-modal';
         this._modal.style.cssText = `
             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);
+            max-width: 400px;
+            max-height: 85vh;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+            border: 1px solid #e2e8f0;
             overflow: hidden;
             display: flex;
             flex-direction: column;
+            margin: auto;
         `;
 
         // 创建头部
@@ -7531,13 +9035,15 @@ class CustomOptionsControl {
         const searchSection = this._createSearchSection();
         this._modal.appendChild(searchSection);
 
-        // 创建选项列表
+        // 创建选项列表容器
         this._listBox = document.createElement('div');
+        this._listBox.className = 'modal-content';
         this._listBox.style.cssText = `
             flex: 1;
             overflow-y: auto;
-            padding: 0 1.25rem 1.25rem 1.25rem;
-            min-height: 10rem;
+            padding: 0 16px 12px 16px;
+            min-height: 200px;
+            max-height: 50vh;
         `;
         this._modal.appendChild(this._listBox);
 
@@ -7548,13 +9054,12 @@ class CustomOptionsControl {
         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._checkViewportAndAdjust();
+
+        // 添加窗口调整事件监听
+        this._handleResize = () => this._checkViewportAndAdjust();
+        window.addEventListener('resize', this._handleResize);
 
         // 点击遮罩关闭
         this._overlay.addEventListener('click', (e) => {
@@ -7574,37 +9079,85 @@ class CustomOptionsControl {
         this._renderList('');
     }
 
+    _checkViewportAndAdjust() {
+        if (!this._modal) return;
+
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const isLandscape = viewportWidth > viewportHeight;
+
+        // 如果是横屏且高度较小
+        if (isLandscape && viewportHeight < 500) {
+            this._modal.style.maxHeight = '90vh';
+            this._modal.style.maxWidth = '90vw';
+            this._modal.style.width = '90vw';
+
+            // 调整列表区域高度
+            const listBox = this._modal.querySelector('.modal-content');
+            if (listBox) {
+                listBox.style.maxHeight = '60vh';
+                listBox.style.minHeight = '30vh';
+            }
+
+            // 确保底部按钮可见
+            const footer = this._modal.querySelector('.modal-footer');
+            if (footer) {
+                footer.style.position = 'sticky';
+                footer.style.bottom = '0';
+                footer.style.background = '#f8fafc';
+                footer.style.zIndex = '10';
+            }
+        } else {
+            // 恢复正常样式
+            this._modal.style.maxHeight = '85vh';
+            this._modal.style.maxWidth = '400px';
+            this._modal.style.width = '100%';
+
+            const listBox = this._modal.querySelector('.modal-content');
+            if (listBox) {
+                listBox.style.maxHeight = '50vh';
+                listBox.style.minHeight = '200px';
+            }
+
+            const footer = this._modal.querySelector('.modal-footer');
+            if (footer) {
+                footer.style.position = '';
+                footer.style.bottom = '';
+                footer.style.background = '';
+                footer.style.zIndex = '';
+            }
+        }
+    }
+
     _createHeader() {
         const header = document.createElement('div');
+        header.className = 'modal-header';
         header.style.cssText = `
-            padding: 1.25rem 1.25rem 1rem 1.25rem;
+            padding: 16px 16px 12px 16px;
             border-bottom: 1px solid #e2e8f0;
-            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            background: #f8fafc;
+            flex-shrink: 0;
         `;
 
         const title = document.createElement('h2');
+        title.className = 'modal-title';
         title.textContent = this._title;
         title.style.cssText = `
-            margin: 0 0 0.5rem 0;
-            font-size: 1.125rem;
+            margin: 0 0 4px 0;
+            font-size: 15px;
             font-weight: 600;
             color: #1e293b;
             display: flex;
             align-items: center;
-            gap: 0.5rem;
+            gap: 6px;
         `;
 
-        // 添加图标
-        const icon = document.createElement('span');
-        icon.innerHTML = '📋';
-        icon.style.fontSize = '1.25rem';
-        title.insertBefore(icon, title.firstChild);
-
         const subtitle = document.createElement('p');
+        subtitle.className = 'modal-subtitle';
         subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
         subtitle.style.cssText = `
             margin: 0;
-            font-size: 0.8125rem;
+            font-size: 12px;
             color: #64748b;
         `;
 
@@ -7612,31 +9165,30 @@ class CustomOptionsControl {
         closeBtn.innerHTML = '✕';
         closeBtn.style.cssText = `
             position: absolute;
-            top: 1rem;
-            right: 1rem;
-            width: 1.75rem;
-            height: 1.75rem;
+            top: 12px;
+            right: 12px;
+            width: 24px;
+            height: 24px;
             border: none;
             background: #f1f5f9;
             color: #64748b;
-            border-radius: 50%;
+            border-radius: 4px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 0.875rem;
+            font-size: 12px;
             transition: all 0.2s ease;
             font-weight: 500;
+            flex-shrink: 0;
         `;
         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());
 
@@ -7650,8 +9202,10 @@ class CustomOptionsControl {
 
     _createSearchSection() {
         const section = document.createElement('div');
+        section.className = 'search-container';
         section.style.cssText = `
-            padding: 1.25rem 1.25rem 1rem 1.25rem;
+            padding: 12px 16px 8px 16px;
+            flex-shrink: 0;
         `;
 
         const searchContainer = document.createElement('div');
@@ -7663,25 +9217,25 @@ class CustomOptionsControl {
         searchIcon.innerHTML = '🔍';
         searchIcon.style.cssText = `
             position: absolute;
-            left: 0.875rem;
+            left: 10px;
             top: 50%;
             transform: translateY(-50%);
-            font-size: 0.875rem;
+            font-size: 12px;
             color: #94a3b8;
             pointer-events: none;
         `;
 
         const searchInput = document.createElement('input');
         searchInput.placeholder = '搜索选项...';
-        searchInput.className = 'custom-search-input';
+        searchInput.className = 'custom-search-input search-input';
         searchInput.style.cssText = `
             width: 100%;
-            padding: 0.75rem 1rem 0.75rem 2.5rem;
-            border: 2px solid #e2e8f0;
-            border-radius: 0.5rem;
-            font-size: 0.875rem;
+            padding: 8px 10px 8px 28px;
+            border: 1px solid #e2e8f0;
+            border-radius: 4px;
+            font-size: 13px;
             background: white;
-            transition: all 0.3s ease;
+            transition: all 0.2s ease;
             box-sizing: border-box;
             font-family: inherit;
             outline: none;
@@ -7689,7 +9243,7 @@ class CustomOptionsControl {
 
         searchInput.addEventListener('focus', () => {
             searchInput.style.borderColor = '#667eea';
-            searchInput.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.1)';
+            searchInput.style.boxShadow = '0 0 0 2px rgba(102, 126, 234, 0.1)';
         });
 
         searchInput.addEventListener('blur', () => {
@@ -7710,65 +9264,62 @@ class CustomOptionsControl {
 
     _createFooter() {
         const footer = document.createElement('div');
+        footer.className = 'modal-footer';
         footer.style.cssText = `
-            padding: 1rem 1.25rem;
-            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            padding: 12px 16px;
+            background: #f8fafc;
             border-top: 1px solid #e2e8f0;
             display: flex;
             justify-content: flex-end;
-            gap: 0.75rem;
+            gap: 8px;
+            flex-shrink: 0;
         `;
 
         const cancelBtn = document.createElement('button');
         cancelBtn.textContent = '取消';
         cancelBtn.style.cssText = `
-            padding: 0.5rem 1rem;
+            padding: 6px 12px;
             background: white;
             border: 1px solid #d1d5db;
-            border-radius: 0.375rem;
+            border-radius: 4px;
             cursor: pointer;
-            font-size: 0.875rem;
+            font-size: 13px;
             font-weight: 500;
             color: #374151;
             transition: all 0.2s ease;
             font-family: inherit;
+            min-height: 32px;
         `;
         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: 0.5rem 1rem;
+            padding: 6px 12px;
             background: #007cba;
             color: white;
             border: none;
-            border-radius: 0.375rem;
+            border-radius: 4px;
             cursor: pointer;
-            font-size: 0.875rem;
+            font-size: 13px;
             font-weight: 500;
             transition: all 0.2s ease;
             font-family: inherit;
-            box-shadow: 0 2px 4px rgba(0, 124, 186, 0.2);
+            min-height: 32px;
         `;
         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());
 
@@ -7792,13 +9343,13 @@ class CustomOptionsControl {
             const empty = document.createElement('div');
             empty.style.cssText = `
                 text-align: center;
-                padding: 2.5rem 1rem;
+                padding: 40px 16px;
                 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>
+                <div style="font-size: 20px; margin-bottom: 8px; opacity: 0.6;">🔍</div>
+                <div style="font-size: 13px; font-weight: 500; margin-bottom: 4px; color: #64748b;">未找到相关结果</div>
+                <div style="font-size: 12px;">尝试使用其他关键词搜索</div>
             `;
             this._listBox.appendChild(empty);
             return;
@@ -7806,28 +9357,29 @@ class CustomOptionsControl {
 
         // 添加选项统计
         const stats = document.createElement('div');
+        stats.className = 'stats-text';
         stats.style.cssText = `
-            padding: 0.5rem 0;
-            font-size: 0.8125rem;
+            padding: 4px 0;
+            font-size: 12px;
             color: #64748b;
             border-bottom: 1px solid #f1f5f9;
-            margin-bottom: 0.5rem;
+            margin-bottom: 8px;
         `;
         stats.textContent = `找到 ${list.length} 个相关选项`;
         this._listBox.appendChild(stats);
 
         list.forEach((opt, index) => {
             const item = document.createElement('label');
-            item.className = 'custom-list-item';
+            item.className = 'custom-list-item list-item';
             item.style.cssText = `
                 display: flex;
                 align-items: center;
-                padding: 0.75rem;
+                padding: 8px;
                 cursor: pointer;
-                border-radius: 0.5rem;
-                margin-bottom: 0.375rem;
-                transition: all 0.2s ease;
-                border: 2px solid transparent;
+                border-radius: 4px;
+                margin-bottom: 4px;
+                transition: all 0.1s ease;
+                border: 1px solid transparent;
                 background: white;
                 position: relative;
                 overflow: hidden;
@@ -7838,16 +9390,17 @@ class CustomOptionsControl {
             checkbox.className = 'custom-checkbox';
             checkbox.value = opt.value;
             checkbox.checked = this._selectedOptions.includes(opt.value);
-            checkbox.style.marginRight = '0.75rem';
+            checkbox.style.marginRight = '8px';
 
             const labelSpan = document.createElement('span');
             labelSpan.innerHTML = this._highlight(opt.label, keyword);
             labelSpan.style.cssText = `
                 flex: 1;
-                font-size: 0.875rem;
+                font-size: 13px;
                 color: #374151;
                 line-height: 1.4;
                 font-weight: 500;
+                word-break: break-word;
             `;
 
             // 添加选中状态的视觉反馈
@@ -7869,7 +9422,7 @@ class CustomOptionsControl {
                 }
 
                 // 更新标题中的统计信息
-                const subtitle = this._modal.querySelector('p');
+                const subtitle = this._modal.querySelector('.modal-subtitle');
                 if (subtitle) {
                     subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
                 }
@@ -7878,23 +9431,14 @@ class CustomOptionsControl {
             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;
         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>');
+        return text.replace(regex, '<mark style="background: #fef3c7; padding: 1px 3px; border-radius: 2px; font-weight: 600;">$1</mark>');
     }
 
     _escapeRegExp(string) {
@@ -7923,6 +9467,9 @@ class CustomOptionsControl {
 
     _closeModal() {
         if (this._overlay) {
+            // 移除事件监听
+            window.removeEventListener('resize', this._handleResize);
+
             // 添加退出动画
             this._modal.style.animation = 'modalSlideIn 0.2s ease-out reverse';
             this._overlay.style.animation = 'modalBackdropFadeIn 0.2s ease-out reverse';